HTML-тег <​head​>: зачем он нужен и что в него входит
2026-02-21 20:07 Diff
https://skillbox.ru/media/code/html-teg-head-zachem-on-nuzhen-i-chto-v-nego-vhodit/

#статьи

  • 30 июл 2025
  • 0

Разбираемся, как работает «голова» HTML-документа, какие теги в неё можно добавлять и почему от неё зависит всё — от отображения страницы до SEO.

Иллюстрация: Polina Vari для Skillbox Media

Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

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

Если сравнивать веб-страницу с книгой, то <head> — это всё, что находится на обложке и форзаце: название, аннотация, выходные данные. В этой статье разберём, зачем нужен тег <head>, какие элементы в него входят и как правильно его использовать.

Содержание

В HTML-документе есть две главные части: <head> и <body>. Всё, что видит пользователь, — текст, картинки, кнопки, — находится внутри <body>. А в <head> — то, что помогает браузеру правильно отобразить эту страницу.

Тег <head> — это своего рода «настройки» документа. Здесь указывают:

  • название страницы;
  • кодировку;
  • подключение CSS-стилей и иконок;
  • описание для поисковых систем;
  • инструкции для социальных сетей;
  • скрипты, которые должны загрузиться раньше контента.

Тег <head> начинается сразу под тегом <html> и заканчивается перед тегом <body>. Он описывает настройки страницы и не должен содержать видимый контент — только метаинформацию.

Простейшая структура HTML-документа выглядит так:

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <title>Моя первая страница</title> </head> <body> <h1>Привет, мир!</h1> <p>Это первый абзац на странице.</p> </body> </html>

Здесь:

  • тег <head> содержит информацию, которая нужна браузеру, — кодировку текста (UTF-8) и заголовок страницы;
  • всё, что видит пользователь, находится внутри <body>.

Важно: на странице должен быть только один тег <head>. Его нельзя размещать внутри <body>, дублировать или выносить за пределы <html> — это будет ошибкой.

Тег <head> содержит метаинформацию о документе — то есть данные, которые помогают браузеру, поисковым системам и соцсетям правильно обработать страницу. Вот основные теги, которые чаще всего размещают внутри:

Тег <title> (от «title» — заголовок) задаёт название вкладки в браузере и в результатах поиска. У каждой страницы должен быть свой заголовок. Без тега <title> браузер покажет во вкладке название файла.

<head> <!-- Заголовок страницы --> <title>Тег HEAD</title> </head>

Тег <title> можно написать на странице только один раз.

Тег <meta> отвечает за размещение метаданных на веб-странице. Они не видны пользователю, но нужны браузеру и поисковым системам для оптимизации содержимого. Можно явно указать кодировку, информацию об авторстве страницы или другие данные для поисковых систем:

<!DOCTYPE html> <html> <head> <!-- Указываем явную кодировку UTF-8 --> <meta charset="UTF-8" /> <meta name="author" content="Skillbox Media" /> </head> <body> <!-- «Привет» на японском --> <h1> こんにちは </h1> </body> </html>

Если в браузере по умолчанию не стояла кодировка UTF-8, то японские иероглифы могли бы не отобразиться корректно (впрочем, как и кириллические символы).

Однако с явно указанным параметром charset в общем теге <head> следующие символы корректно отобразятся в любом браузере:

Скриншот: Google Chrome / Skillbox Media

Вот ещё несколько основных метатегов:

  • viewport — отвечает за адаптивность: без него страница на мобильных устройствах может отображаться слишком маленькой или скроллиться горизонтально.
  • description — короткий текст, на основании которого поисковики составляют сниппет.
  • robots — даёт поисковикам рекомендации: индексировать ли страницу, следовать по ссылкам или нет.
  • author, generator — указывают авторство или движок сайта. Обычно не критично, но, если важно, можно включить.
  • http-equiv — полезен для ретроградной совместимости — позволяет делать то же, что HTTP-заголовки (например, для кэширования).

С помощью <link> можно подключать внешние ресурсы: стили, шрифты, иконки. Этот тег не выводит ничего на экран, но помогает браузеру правильно оформить страницу.

<head> <!-- Подключение внешнего файла CSS --> <link rel="stylesheet" href="styles.css" /> <!-- Подключение ICO-файла для отображения в браузере --> <link rel="icon" href="skillbox.ico" type="image/x-icon" /> </head>
  • rel="stylesheet" сообщает браузеру, что нужно подключить таблицу стилей.
  • rel="icon" задаёт фавикон — иконку сайта на вкладке браузера.

Вот ICO-файл, который мы подключили в <head>. Можете его скачать, он пригодится вам в разделе с практикой.

Изображение: Skillbox Media

Если открыть браузер, то фавикон поменяется:

Скриншот: Google Chrome / Skillbox Media

Иногда на сайте много ссылок, которые ведут на страницы одного и того же сайта. Чтобы не прописывать в каждой ссылке полный адрес, можно задать «базу» — общий начальный путь. Для этого и существует тег <base>.

Он указывается в <head> и сообщает браузеру, с чего начинать все относительные ссылки на странице.

Допустим, у вас есть базовый адрес:

<base href="https://www.google.com/">

А в теле страницы ссылка указана так:

<a href="imghp">Поиск по картинкам в Google</a>

Браузер сам подставит начало из <base>, и получится такая ссылка:

https://www.google.com/imghp

На странице можно использовать только один тег <base>, иначе браузер не поймёт, какой базовый адрес выбрать.

Иногда стили удобно писать прямо внутри HTML-документа. Это может пригодиться, если:

  • вы пишете демо или тестируете что-то локально;
  • стили нужны только для одной страницы;
  • файл со стилями подключить затруднительно.

Делается это с помощью тега <style>.

<head> <style> body { font-family: 'Segoe UI', sans-serif; background-color: #f0f0f0; color: #333; } h1 { color: darkslateblue; } </style> </head>

Но лучше использовать внешний CSS-файл через <link>, — так удобнее поддерживать стили и переиспользовать их.

Скрипты управляют поведением страницы. Их можно размещать как в конце <body>, так и в <head> — в зависимости от задачи.

Есть два основных способа использовать <script> в <head>.

1. Встроенный скрипт — код пишется прямо внутри тега:

<head> <script> console.log("Это находится в Head"); </script> </head>

Этот способ подойдёт для коротких или критически важных скриптов, которые должны выполниться до загрузки страницы.

2. Внешний скрипт — подключается файл JavaScript:

<head> <script src="app.js" defer></script> </head>

Атрибут defer здесь говорит браузеру: загрузи скрипт сейчас, но выполни его после полной загрузки HTML.

Внешние скрипты по нескольким причинам удобнее внутренних:

  • Код JavaScript хранится отдельно от HTML — это упрощает структуру страницы, так её легче поддерживать.
  • Один и тот же файл можно использовать на нескольких страницах — это экономит ресурсы и ускоряет загрузку.
  • Изменения в логике поведения не требуют редактирования HTML-документа — достаточно обновить JS-файл.

Во всех случаях нужно осторожно размещать скрипты в <head> — особенно если они не отложены (defer), потому что скрипты могут замедлить загрузку сайта.

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

Браузер сначала читает содержимое <head>, чтобы понять:

  • какую кодировку использовать;
  • какие стили подключить;
  • как адаптировать страницу к ширине экрана.

Без этих настроек сайт может выглядеть некорректно — например, текст будет с иероглифами или страница не подстроится под мобильный экран.

Когда браузер загружает страницу, он обычно останавливается на каждом теге <script> и ждёт, пока скрипт загрузится и выполнится. Это может замедлить отображение контента. Атрибут defer решает эту проблему: он позволяет загрузить скрипт в фоновом режиме и выполнить его только после того, как вся HTML-разметка будет обработана. В результате:

  • страница загружается быстрее;
  • пользователь видит контент почти сразу;
  • сайт становится более отзывчивым и удобным для слабых устройств или при медленном интернете.

Поисковые системы используют данные из <head>, чтобы понять содержание страницы. Особенно важны теги <title> и <meta name="description"> — именно они часто отображаются в сниппетах на странице выдачи. Хорошо составленный заголовок и описание:

  • повышают кликабельность сайта в поиске;
  • помогают алгоритмам точнее оценить тематику страницы;
  • позволяют выделиться среди конкурентов, особенно если упомянуты ключевые слова и выгоды.

Когда вы публикуете ссылку на сайт в мессенджере или социальной сети, она может отображаться как простой URL или как красивая карточка с изображением, заголовком и описанием. Чтобы всё выглядело аккуратно и привлекательно, в <head> добавляют Open-Graph-теги.

Эти метатеги используют соцсети (например, «ВКонтакте» или Telegram), чтобы понять, какую информацию показывать при предпросмотре:

<meta property="og:title" content="Название страницы" /> <meta property="og:description" content="Описание страницы" /> <meta property="og:image" content="https://example.com/preview.jpg" />
  • og:title — заголовок карточки, чаще всего совпадает с <title>;
  • og:description — краткое описание содержания страницы;
  • og:image — ссылка на изображение, которое будет показано рядом со ссылкой.

Без этих тегов соцсети могут автоматически выбрать неудачные заголовки, случайные картинки или вовсе не показать описание. Поэтому добавление Open-Graph-тегов — важный шаг для контроля внешнего вида ссылки.

Иногда сайт должен корректно работать не только в современных браузерах, но и в более старых версиях — например, в Internet Explorer, который до сих пор используется в некоторых организациях. Чтобы помочь таким браузерам понять, как отображать страницу, в <head> добавляют специальные теги.

Один из них — <meta http-equiv>.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Этот тег говорит браузеру Internet Explorer использовать максимально доступный движок отображения (Edge), а не устаревший режим совместимости. Это может предотвратить ошибки в вёрстке или в отображении стилей.

Кроме того, можно использовать и другие настройки совместимости. В этом поможет тег <meta>. Вот что ещё можно указать.

Управление кэшированием — чтобы браузер знал, как долго хранить данные страницы:

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

Этот тег говорит браузеру каждый раз запрашивать страницу с сервера, не используя старые версии из кэша.

Региональные настройки — помогают указать язык и страну по умолчанию:

<meta http-equiv="content-language" content="ru" />

Это может быть полезно для многоязычных сайтов или локализованных сервисов.

Иногда по невнимательности разработчика теги <title>, <meta> или <link> оказываются не в том месте — например, внутри тега <body>. Это нарушает структуру документа: браузер может проигнорировать такие теги, а валидатор HTML покажет ошибку или предупреждение. Все подобные элементы должны находиться строго внутри <head>.

Внешний файл со стилями нужно подключать через тег <link> именно в <head>. Если попытаться подключить его в другом месте, стили могут применяться с задержкой, и при загрузке страницы появится визуальное «моргание»: сначала пользователь увидит неоформленный HTML, и только потом сработает CSS.

<head> <link rel="stylesheet" href="style.css"> </head>

CSS-стили должны подключаться раньше JavaScript. Если поменять порядок, скрипты могут выполниться до того, как применятся стили, что приведёт к некорректному отображению:

<head> <!-- Сначала стили --> <link rel="stylesheet" href="main.css"> <!-- Потом JavaScript --> <script src="app.js" defer></script> </head>

Тег <meta charset="UTF-8"> задаёт кодировку текста на странице. Если его нет, браузер может не понять, как отображать кириллические или другие символы. В результате текст может замениться на иероглифы, «кракозябры» или знаки вопроса. Этот тег должен быть первым внутри <head>, до всех других метатегов, — иначе он может не сработать вовремя.

Тег <meta name="viewport"> нужен для корректного отображения сайта на смартфонах и планшетах. Без него страница может не адаптироваться под ширину экрана, и пользователям придётся вручную масштабировать содержимое. Это ухудшает впечатление от сайта, особенно на мобильных устройствах.

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

Не стоит вставлять в <head> всё подряд. Повторяющиеся теги, лишние библиотеки и скрипты не только замедляют загрузку, но и делают код трудночитаемым и трудноподдерживаемым.

Вот пример того, как делать не нужно:

<head> <meta charset="UTF-8"> <title>Ужасный head</title> <link rel="stylesheet" href="style.css"> <script src="jquery.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="reset.css"> <script src="analytics.js"></script> <link rel="stylesheet" href="style.css"> <!-- Повтор --> <meta charset="UTF-8"> <!-- Повтор --> <script src="slider.js"></script> <script src="popup.js"></script> <title>Повтор заголовка</title> <!-- Повтор --> <link rel="stylesheet" href="custom-theme.css"> <meta name="description" content="Описание 1"> <meta name="description" content="Описание 2"> <!-- Повтор --> <script src="jquery.js"></script> <!-- Повтор --> <link rel="stylesheet" href="bootstrap.css"> <script src="unused-library.js"></script> <!-- Вообще не нужен --> <link rel="stylesheet" href="print.css" media="print"> <script>alert("Серьёзно? alert в <head>?")</script> <!-- Без комментариев --> </head>

1. Создайте новый текстовый файл и назовите его index.html.

2. Откройте его в редакторе кода (например, в Visual Studio Code) и вставьте следующий код:

<!DOCTYPE html> <html lang="ru"> <head> </head> <body> <h1>Привет!</h1> <p>Это моя первая HTML‑страница с правильным head.</p> </body> </html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Мой первый сайт на HTML"> <title>Привет, мир!</title> <link rel="icon" href="favicon.ico">

Здесь:

  • <meta charset="UTF-8"> — указывает кодировку страницы UTF‑8. <meta name="viewport" content="width=device-width, initial-scale=1.0"> — делает сайт адаптивным для мобильных устройств;
  • width=device-width — устанавливает ширину страницы, равную ширине экрана устройства;
  • initial-scale=1.0 — задаёт начальный масштаб страницы;
  • <meta name="description" content="Мой первый сайт на HTML"> — краткое описание страницы для поисковых систем;
  • <title>Привет, мир!</title> — заголовок страницы;
  • <link rel="icon" href="favicon.ico"> — подключает иконку сайта (favicon).

3. Скачайте файл favicon.ico с Google-диска и положите его в ту же папку, что и index.html. Это значок страницы, который браузер покажет на вкладке.

4. Сохраните файл и откройте его в браузере (например, в Google Chrome). Вы должны увидеть заголовок «Привет!» и описание под ним.

Скриншот: Google Chrome / Skillbox Media

Чтобы добавить стили и скрипты, создайте два новых файла рядом с index.html:

  • style.css — для стилей;
  • script.js — для JavaScript.

В файл style.css вставьте:

body { background-color: #f0f8ff; font-family: Arial, sans-serif; }

В файл script.js вставьте:

console.log("Скрипт работает!");

Снова откройте index.html и добавьте ссылки на CSS и JavaScript в раздел <head>:

<link rel="stylesheet" href="style.css"> <script src="script.js" defer></script>

Итоговый код будет выглядеть так:

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Мой первый сайт на HTML"> <title>Привет, мир!</title> <link rel="icon" href="favicon.ico"> <!-- Подключение внешних файлов --> <link rel="stylesheet" href="style.css"> <script src="script.js" defer></script> </head> <body> <h1>Привет!</h1> <p>Это моя первая HTML‑страница с правильным head.</p> </body> </html>
  • Убедитесь, что все три файла — index.html, style.css и script.js — находятся в одной папке.
  • Откройте index.html в браузере и обновите страницу сочетанием клавиш Shift + Ctrl + R.
  • Откройте консоль разработчика (F12 → вкладка «Консоль»).

Если всё сделано правильно, на странице появится голубой фон и будет новый шрифт, а в консоли выведется сообщение:

Скрипт работает!Скриншот: Google Chrome / Skillbox Media Курс с трудоустройством: «Профессия Фронтенд-разработчик + ИИ» Узнать о курсе