HTML-тег <head>
Тег <head> содержит метаданные (заголовок документа, кодировку, стили, ссылки, скрипты), специфическую информацию о веб-странице, которая не отображается пользователю. Метаданные предоставляют браузерам и поисковым системам техническую информацию о веб-странице.
Тег <head> включает следующие элементы:
- Тег
<title>определяет заголовок веб-страницы (обязательный). Его можно перепутать с тегом<h1>, но они различаются. Тег<h1>задает заголовок содержимого страницы, тогда как тег<title>является метаданными, представляющими заголовок всего HTML-документа, а не его содержимого. - Тег
<style>содержит код CSS, определяющий, как элементы HTML должны отображаться в браузере. - Тег
<base>определяет абсолютный (базовый) URL для всех относительных URL. - Тег
<link>определяет связь между текущим HTML-документом и ресурсом, на который он ссылается, или содержит ссылку на внешнюю таблицу стилей. Он может иметь два атрибута: rel="stylesheet" и href. - Тег
<meta>предоставляет дополнительную информацию (метаданные) об HTML-документе. В<head>страницы могут присутствовать различные элементы<meta>, которые могут содержать атрибуты name и content. - Тег
<script>содержит скрипт (обычно JavaScript) или ссылку на внешний файл со скриптами. Этот элемент может быть включен в<head>. Иногда лучше разместить его в конце<body>для улучшения производительности загрузки страницы. Элемент<script>может казаться пустым, но это не так. - Тег
<noscript>определяет альтернативный текст, который отображается, если браузер не поддерживает скрипты или они отключены пользователем.
Синтаксис
Тег <head> является парным. Содержимое записывается между открывающим (<head>) и закрывающим (</head>) тегами.
Пример использования HTML-тега <head> вместе с тегами <title> и <style>:
Пример тега head в HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
body{
background-color: #d3d3d3;
}
p{
color: #1c87c9;
}
a{
color: red;
}
</style>
</head>
<body>
<p>Paragraph</p>
<a href="#">Link</a>
</body>
</html>В приведенном примере тег <head> используется вместе с тегами <title> и <style>. Тег <title> определяет заголовок документа, который отображается в окне браузера. В теге <style> задается стиль документа: фон документа светло-серый, текст в абзацах, отмеченных тегом <p>, синий, а ссылки внутри тега <a> красные.
Пример использования HTML-тега <head> вместе с тегом <link>:
Содержимое страницы
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<p>The content of the page</p>
</body>
</html>Результат
В этом примере мы указали ссылку на файл style.css в папке CSS.
Пример использования HTML-тега <head> вместе с тегом <meta>:
HTML-тег <head>
<!DOCTYPE html>
<html>
<head>
<meta name="title" content="HTML and CSS Books" />
<meta name="description" content="HTML and CSS Basics for Beginners" />
<meta http-equiv="refresh" content="30" />
</head>
<body>
<p>The content of the page</p>
</body>
</html>Тег <meta> содержит метаданные для поисковых систем — meta title и meta description.
Атрибуты
В HTML5 тег <head> не имеет каких-либо специфических атрибутов. Он поддерживает только Глобальные атрибуты и Атрибуты событий.
Практика
Какой из следующих элементов может использоваться внутри HTML-тега <head>?