HTML тег `<head>`

Значение и применение

Текст между тегами <head> и </head> содержит информацию о документе (сведения о документе, которые не отображаются пользователю).

Данный элемент может содержать в себе следующие элементы:

<title> - обеспечивает название для документа. Является обязательным элементом.
<style> - сообщает браузеру, что внутри него содержится код CSS.
<base> - определяет базовый URL для всех относительных URL-адресов.
<link> - определяет связь между документом и внешним ресурсом, используется для ссылки на внешние таблицы стилей.
<meta> - обеспечивает метаданные о HTML документе.
<script> - элемент содержит скрипт (как правило на языке JavaScript), либо он указывает на внешний файл со скриптом.
<noscript> - определяет альтернативный контент для пользователей, которые по тем или иным причинам отключили в своем браузере скрипты или их браузер не поддерживает скрипты.

В начале <head> укажите <meta charset="utf-8"> и сохраняйте сам файл в UTF-8: декларация не перекодирует уже записанные байты. Для адаптивной страницы добавьте <meta name="viewport" content="width=device-width, initial-scale=1">. Название из <title> видно на вкладке браузера, хотя оно не выводится в содержимом страницы.

Какие сведения задавать для страницы

В примере ниже название вкладки помогает отличить памятку от других страниц сайта, а видимый заголовок сразу называет её тему. Описание meta name="description" кратко передаёт содержание; поисковая система может использовать его для сниппета, но не обязана показывать дословно. Не помещайте в head абзацы и навигацию страницы — их место в body.

Пошаговая настройка кодировки, области просмотра и описания разобрана в уроке о метаданных.

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьhtml.elements.head
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`head`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут	Значение	Описание
`profile`	`URL`	Не поддерживается в HTML5. Указывает URL к документу, который содержит набор правил. Правила могут быть считаны в браузерах, чтобы коректно понимать информацию в атрибуте содержимого `<meta>` тега.

Примеры, попробуйте сами

Структура документа

Скачайте HTML и откройте его в браузере: title задаёт название вкладки, а h1 — видимый заголовок страницы. Измените их независимо. description описывает страницу, но не выводится в её содержимом; viewport задаёт область просмотра, а сам по себе не делает вёрстку адаптивной. Во встроенном просмотре проверяйте содержимое body.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Памятка о подготовке к походу." />
    <title>Памятка туриста — Клуб путешествий</title>
  </head>
  <body>
    <h1>Что взять в поход</h1>
    <p>Возьмите воду, перекус и аптечку.</p>
  </body>
</html>

Отличия HTML 4.01 от HTML 5

В HTML при определённых условиях можно опустить теги <head> и </head>, но сам элемент остаётся в дереве документа: его создаёт HTML-парсер. Для понятной структуры исходного кода записывайте теги явно.

Значение CSS по умолчанию

CSS

head {
display: none;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML тег <head>