Тег <head> в HTML — это «служебная» часть страницы. В ней не отображается видимый контент, но именно там размещают метаданные: информацию для браузера, поисковых систем и мобильных устройств. Среди самых важных — <title>, указание кодировки (charset) и настройка области просмотра (viewport). Разберём каждый элемент отдельно, с примерами и пояснениями, зачем он нужен и как его правильно использовать.
<title>: заголовок страницы
Тег <title> задаёт заголовок вкладки браузера и часто используется как заголовок сниппета в поисковой выдаче. Это один из ключевых элементов для SEO и удобства пользователя.
Где располагается
Всегда внутри <head>:
<head> <title>Пример заголовка страницы</title> </head>
Практические требования
- Длина. Оптимально 50–60 символов: более длинные тексты обрезаются в результатах поиска и вкладках.
- Содержательность. Заголовок должен точно отражать содержимое страницы.
- Уникальность. На каждой странице сайта заголовок должен быть своим.
- Без лишних слов. Избегайте шаблонов вроде «Главная страница сайта», «Сайт компании», «Лучший…» — они снижают полезность текста.
Пример для разных страниц
<!-- Главная страница --> <title>Интернет‑магазин электроники: смартфоны, ноутбуки, аксессуары</title> <!-- Страница товара --> <title>Ноутбук ASUS ZenBook 14 — купить в интернет‑магазине с доставкой</title> <!-- Страница статьи --> <title>Как настроить .htaccess: подробная инструкция с примерами</title>
Кодировка: charset
Кодировка отвечает за то, как браузер интерпретирует символы на странице. Если она указана неверно, вместо кириллицы могут отображаться «кракозябры». Сейчас стандартом де‑факто является UTF‑8.
Как указать
Через тег <meta> с атрибутом charset:
<head> <meta charset="utf-8"> </head>
Это самый простой и рекомендуемый способ. Раньше использовали более длинную запись с http-equiv, но сейчас она избыточна:
<!-- Устаревший вариант, не рекомендуется --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Важные нюансы
- Должен быть первым метатегом в head. Это повышает вероятность, что браузер прочитает его до начала обработки остального содержимого.
- Совпадение с реальной кодировкой файла. Файл HTML должен быть сохранён именно в UTF‑8 (в редакторах кода это обычно отдельная настройка).
- Один charset на страницу. Не нужно указывать несколько разных кодировок.
Полный пример head с charset
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Страница с правильной кодировкой</title> </head> <body> <p>Привет, мир! Здесь корректно отображаются русские буквы, эмодзи и спецсимволы: ©, €, α, β.</p> </body> </html>
Привет, мир! Здесь корректно отображаются русские буквы, эмодзи и спецсимволы: ©, €, α, β.
viewport: адаптация под мобильные устройства
Метатег viewport говорит браузеру, как масштабировать страницу на смартфонах и планшетах. Без него сайт будет отображаться как «уменьшенная версия десктопа», и пользователю придётся приближать и двигать экран.
Базовый вариант
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Что означают параметры:
width=device-width— ширина области просмотра равна ширине экрана устройства.initial-scale=1.0— начальный масштаб равен 1 (без увеличения/уменьшения).
Куда ставить
В <head>, желательно сразу после <meta charset>:
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мобильная версия страницы</title> </head>
Нюансы и частые ошибки
- Не отключайте масштабирование. Параметры вроде
maximum-scale=1.0,user-scalable=noухудшают доступность: людям с плохим зрением будет сложно читать текст. - Не меняйте ширину на фиксированное значение. Например,
width=600сломает адаптацию на разных экранах. - Viewport обязателен для адаптивной вёрстки. Даже если вы не пишете медиа‑запросы вручную, многие библиотеки и фреймворки рассчитывают на этот метатег.
Полный пример head со всеми тремя элементами
Ниже — готовый шаблон, который можно использовать как основу для любой страницы:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Каталог товаров: чай и кофе</title> </head> <body> <h1>Чай и кофе</h1> <p>В нашем каталоге вы найдёте сорта со всего мира.</p> </body> </html>
Чай и кофе
В нашем каталоге вы найдёте сорта со всего мира.
Дополнительные метаданные (опционально, но полезно)
Хотя в теме статьи акцент на трёх основных элементах, в <head> часто добавляют ещё пару вещей, которые логично идут следом:
lang в теге html
Атрибут lang на уровне <html> помогает скринридерам и поисковикам определить язык страницы:
<html lang="ru">
Для других языков: en, de, fr и т. д.
description
Краткое описание страницы, которое может использоваться в поисковой выдаче:
<meta name="description" content="Купить чай и кофе в нашем интернет‑магазине: большой выбор, быстрая доставка, выгодные цены.">
Оно не влияет на отображение страницы, но важно для SEO.
Пример head с этими дополнениями:
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Каталог чая и кофе: лучшие сорта, удобная фильтрация, доставка по всей стране."> <title>Чай и кофе — каталог интернет‑магазина</title> </head>
<title>— обязательный заголовок страницы, видимый в браузере и в поиске. Делайте его точным и не слишком длинным.<meta charset="utf-8">— гарантирует корректное отображение текста, включая кириллицу и спецсимволы.<meta name="viewport">— делает страницу удобной для мобильных устройств.- Все три элемента размещают внутри
<head>, желательно в начале, чтобы браузер обработал их как можно раньше. - Дополнительно можно добавить
langу тега<html>и мета‑описаниеdescription.
Загрузка...