Содержимое head: meta, charset, viewport

Тег head не виден на странице, но именно от него зависит кодировка, поведение на телефоне, заголовок во вкладке и то, как страницу покажет поисковик.

head — служебная часть HTML-документа, где браузер и поисковые роботы читают метаданные: кодировку, заголовок, описание, правила отображения и ссылки на ресурсы. Содержимое head на самой странице не рисуется.

В базовых разделах мы собрали структуру документа и научились размечать контент в <body>. Теперь спустимся в <head> — туда, где задаётся «паспорт» страницы. На практике именно ошибки в head дают самые обидные баги: текст превращается в «кракозябры», на телефоне всё мелкое и со скроллом вбок, а в поиске вместо описания показывается случайный кусок текста. Все эти проблемы лечатся пятью-шестью тегами, которые надо поставить правильно и в правильном порядке.

Зачем это на практике

Представьте две одинаковые страницы. У первой в head прописаны кодировка, viewport, осмысленный title и описание. У второй head почти пустой. Визуально код тела совпадает, но первая корректно отображается на любом устройстве и выглядит в выдаче как аккуратная карточка, а вторая — ломается на кириллице, неудобна на смартфоне и выводит в Google обрывок первого абзаца. Метаданные — это дешёвая страховка: пара строк экономит часы отладки и улучшает и доступность, и SEO.

charset: кодировка прежде всего

Браузеру нужно знать, в какой кодировке записан файл, иначе он не поймёт байты кириллицы, эмодзи и спецсимволов. Современный стандарт — UTF-8, он покрывает все языки. Объявляют его так:

<meta charset="utf-8">

Критично, что этот тег идёт самым первым в head — в идеале в первых 1024 байтах документа. Браузер начинает разбирать файл сверху вниз, и если он встретит русский текст раньше, чем узнает кодировку, то может начать декодировать его неправильно. Тогда придётся перечитывать документ заново, а в худшем случае вы увидите «Ð¿ÑÐ¸Ð²ÐµÑ» вместо «привет». Поэтому charset ставят сразу после открытия head.

viewport: страница на телефоне

Без специального тега мобильный браузер считает, что страница свёрстана для широкого десктопа, и «отъезжает» — показывает её уменьшенной, как через лупу наоборот. Чтобы вёрстка занимала реальную ширину экрана и масштаб был 1:1, добавляют viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width приравнивает ширину макета к ширине устройства, а initial-scale=1 задаёт начальный масштаб без приближения. Это базовый кирпич адаптивной вёрстки: без него медиазапросы CSS просто не сработают так, как вы ожидаете, и сайт на смартфоне будет мелким и с горизонтальным скроллом.

title и description

Тег title задаёт заголовок вкладки и одновременно крупную синюю ссылку в поисковой выдаче. Он обязателен и должен быть осмысленным и уникальным для каждой страницы:

<title>Каталог книг по HTML — CodeChick</title>

Рядом ставят описание — оно не влияет на саму страницу, но поисковик часто берёт его как текст-сниппет под ссылкой:

<meta name="description" content="Подборка учебников по HTML: от структуры документа до метаданных и SEO. Примеры, квизы, практика.">

Хорошее описание — 120–160 символов, по делу, без перечисления ключевых слов списком. Слишком длинное обрежется многоточием, слишком короткое выглядит бедно. Описание — это реклама ссылки: от него зависит, кликнут по вашему результату или по соседнему.

lang, base и порядок тегов

Язык документа объявляют не в head, а на корневом теге html — это подсказывает браузеру и скринридерам, как читать текст, а поисковику — на каком языке страница:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Моя страница</title>
    <meta name="description" content="Краткое описание страницы.">
  </head>
  <body> ... </body>
</html>

Реже встречается тег base — он задаёт базовый URL, относительно которого считаются все относительные ссылки и пути к ресурсам на странице. Его ставят один раз и до первой ссылки/скрипта:

<base href="https://example.com/docs/">

После этого ссылка <a href="intro.html"> ведёт на https://example.com/docs/intro.html. Пользоваться base надо аккуратно: он влияет на ВСЕ относительные адреса сразу, включая якоря, и легко ломает навигацию, если про него забыть.

Памятка по тегам head

Тег	Зачем
`<meta charset>`	кодировка файла, ставится первой
`<meta viewport>`	правильный масштаб на мобильных
`<title>`	заголовок вкладки и ссылка в выдаче
`<meta description>`	текст-сниппет под ссылкой в поиске
`html lang`	язык страницы для браузера и SEO
`<base>`	базовый URL для относительных ссылок

Как это работает под капотом

Когда приходит HTML, браузер запускает парсер, который читает байты последовательно. Сначала ему нужно решить, как превратить байты в символы — для этого он ищет charset. Если нашёл рано — продолжает спокойно; если поздно или нашёл противоречие, перезапускает разбор с правильной кодировкой. Дальше встреченные в head теги формируют «настройки» документа: viewport уходит в движок раскладки и меняет систему координат для CSS, title попадает в заголовок окна, meta description и язык складываются в метаданные, которые потом считывают робот поисковика и расширения. Важно, что head обрабатывается ДО тела, поэтому корректность этой части задаёт правила для всего остального.

Частые ошибки

charset не первым. Любой текст до объявления кодировки рискует декодироваться неверно — ставьте <meta charset="utf-8"> сразу после открытия head.
Забыли viewport. Без него адаптивная вёрстка не работает, и сайт на телефоне выглядит как уменьшенная десктопная копия.
Одинаковый title на всех страницах. Поисковику тяжело различать страницы, а пользователю — вкладки. Заголовок должен быть уникальным.
Описание набито ключевыми словами. «HTML, верстка, теги, head, мета» выглядит как спам и плохо работает как реклама ссылки.
base поставили и забыли. Он меняет все относительные ссылки разом — частая причина «битых» путей.

Итоги

Содержимое head невидимо, но задаёт кодировку, отображение и метаданные всей страницы.
<meta charset="utf-8"> ставят первым, иначе кириллица превращается в «кракозябры».
<meta name="viewport"> обязателен для корректного вида на мобильных и работы медиазапросов.
title и meta description формируют карточку страницы в поиске — делайте их уникальными и осмысленными.
Язык объявляют атрибутом lang на теге html; порядок тегов в head влияет на разбор документа.