30 июл 2025
0

HTML-тег <head>: зачем он нужен и что в него входит

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

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

Редакция «Код» Skillbox Media

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

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

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

Содержание

Зачем нужен тег <head>
Где находится <head> в структуре HTML-документа
Элементы внутри тега <head>
Как <head> влияет на отображение и поведение страницы
Распространённые ошибки при работе с <head>
Практика. Создаём первую HTML-страницу с правильным <head>

Зачем нужен тег <head>

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

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

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

Где находится <head> в структуре HTML-документа

Тег <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>

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

Тег <title> — название страницы

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

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

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

Тег <meta> в <head> — метаданные

Тег <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> — внешние файлы

С помощью <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>. Можете его скачать, он пригодится вам в разделе с практикой.

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

Тег <base>: как работает базовый адрес

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

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

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

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

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

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

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

https://www.google.com/imghp

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

Тег <style> в <head> — стили CSS

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

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

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

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

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

Тег <script> в <head> — JavaScript-код

Скрипты управляют поведением страницы. Их можно размещать как в конце <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> не видно пользователю, оно напрямую влияет на то, как страница работает и как она воспринимается браузером, поисковыми системами и внешними сервисами.

Помогает браузеру правильно отобразить страницу

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

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

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

Улучшает доступность и производительность

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

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

Влияет на SEO

Поисковые системы используют данные из <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" />

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

Распространённые ошибки при работе с <head>

Теги вне <head>

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

Неправильное подключение CSS

Внешний файл со стилями нужно подключать через тег <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>

Отсутствует charset

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

Пропущен тег viewport

Тег <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>

Практика. Создаём первую HTML-страницу с правильным <head>

Шаг 1

Создаём базовую HTML‑страницу

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). Вы должны увидеть заголовок «Привет!» и описание под ним.

Шаг 2

Подключаем CSS и JavaScript

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

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

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

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

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

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

Шаг 3

Обновляем <head> для подключения файлов

Снова откройте 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>

Шаг 4

Проверяем результат

Убедитесь, что все три файла — index.html, style.css и script.js — находятся в одной папке.
Откройте index.html в браузере и обновите страницу сочетанием клавиш Shift + Ctrl + R.
Откройте консоль разработчика (F12 → вкладка «Консоль»).

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

Скрипт работает!