HTML-тег <head>
Тег HTML <head> содержит метаданные страницы (title, charset, viewport, ссылки, скрипты). Синтаксис, мета-теги и примеры.
Тег <head> содержит метаданные (заголовок документа, кодировку символов, стили, ссылки, скрипты) — специфическую информацию о веб-странице, которая не отображается пользователю. Метаданные предоставляют браузерам и поисковым системам техническую информацию о веб-странице.
Место тега <head> в документе
<head> — первый элемент внутри <html>, расположенный непосредственно перед <body>. Если <body> содержит видимый контент страницы, то <head> хранит информацию, необходимую браузеру для отрисовки и идентификации страницы:
<!DOCTYPE html>
<html>
<head>
<!-- metadata goes here -->
</head>
<body>
<!-- visible content goes here -->
</body>
</html>Тег <head> технически обязателен, однако если его опустить, браузеры автоматически создадут его и перенесут в него элементы уровня head (например, <title> и <meta>). Явное написание тега делает документ предсказуемым и валидным.
Элементы, которые можно размещать в <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>:
Пример HTML-тега head
<!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>Здесь тег <link> подключает страницу к внешней таблице стилей по пути css/style.css (файл в папке css рядом с HTML-файлом). Хранение CSS в отдельном файле — стандартный подход для реальных проектов, поскольку одна таблица стилей может совместно использоваться на многих страницах и кешироваться браузером. Страница выше будет отображаться со стилями только в том случае, если файл style.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> предоставляет метаданные о странице. Содержимое name="description" используется поисковыми системами в качестве сниппета под результатом поиска. Строка http-equiv="refresh" перезагружает страницу каждые 30 секунд — сегодня это редко уместно (это ухудшает доступность и обычно заменяется JavaScript или HTTP-заголовками), поэтому используйте данный подход с осторожностью.
Теги <meta>, которые нужны почти всегда
Несколько тегов <meta> настолько распространены, что практически каждая современная страница их включает.
Кодировка символов и viewport
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My Page</title>
</head><meta charset="UTF-8">объявляет кодировку символов, чтобы буквы с диакритическими знаками, символы и эмодзи отображались корректно. Помещайте его первым в<head>.<meta name="viewport" content="width=device-width, initial-scale=1">указывает мобильным браузерам совместить ширину макета с шириной устройства вместо масштабирования страницы под размер рабочего стола. Отсутствие этого тега — наиболее распространённая причина «крошечных» страниц на телефонах, поэтому включайте его на каждой адаптивной странице.
Теги Open Graph для публикации в социальных сетях
Когда кто-то делится вашим URL на таких платформах, как Facebook, LinkedIn или Slack, эти сервисы читают мета-теги Open Graph (og:) для формирования карточки предварительного просмотра — заголовка, описания и миниатюры изображения.
<head>
<meta property="og:title" content="Learn HTML - W3docs" />
<meta property="og:description" content="A beginner-friendly HTML tutorial." />
<meta property="og:image" content="https://www.example.com/preview.png" />
<meta property="og:url" content="https://www.example.com/learn-html" />
</head>Обратите внимание, что теги Open Graph используют атрибут property (а не name). URL в og:image должен быть абсолютным (начинаться с https://), поскольку социальная платформа запрашивает его со своих серверов. Полный список тегов <meta> см. в главе <meta>.
Атрибуты
В HTML5 тег <head> не имеет специфических атрибутов. Он поддерживает только глобальные атрибуты и атрибуты событий.