Тег <head> идёт сразу после открывающего <html>, перед <body>. Это служебная часть документа: кодировка страницы, заголовок вкладки браузера, метатеги для поиска и соцсетей, подключение CSS и JavaScript. Ни один тег внутри <head> ничего не рисует на самой странице - всё, что видит посетитель, находится дальше, в <body>.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Название страницы</title>
</head>Что обычно находится в head HTML-документа
Минимум, без которого страница будет работать некорректно, - meta charset (кодировка) и title (заголовок вкладки). Дальше по мере надобности добавляются: meta name="viewport" - без него мобильные браузеры показывают страницу как уменьшенную десктопную версию, meta name="description" - текст сниппета в поисковой выдаче, link rel="stylesheet" - подключение CSS-файла, link rel="icon" - иконка вкладки (favicon), script - подключение JavaScript.
Примера с результатом на этой странице не будет: всё, что лежит в <head>, либо совсем не видно на странице (кодировка, метатеги), либо меняет то, что находится ЗА пределами самой страницы - заголовок вкладки браузера, иконку, сниппет в поисковой выдаче. Показать это внутри страницы честно не получится, поэтому вместо примера - таблица того, что реально идёт не так, если про <head> забыть.
Частые ошибки при работе с head
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Забыли <meta charset="UTF-8"> | Кириллица отображается нечитаемыми символами (кракозябрами) в некоторых браузерах | Добавить meta charset первой строкой внутри <head> |
Нет <meta name="viewport"> | На телефоне страница открывается как уменьшенная копия десктопной версии, а не адаптируется под экран | Добавить <meta name="viewport" content="width=device-width, initial-scale=1"> |
Видимый текст или картинка стоят прямо внутри <head> | Невалидная разметка - браузеры обычно скрывают такой контент, но не гарантированно и не везде одинаково | Весь видимый контент - только внутри <body> |
На странице два тега <head> | Браузер использует только первый, второй игнорируется | В документе должен быть ровно один <head> |
