Содержание
Теги от h1 до h6 в HTML обозначают заголовки разных уровней, где h1 — самый важный и большой заголовок (обычно один на странице), а h6 — самый мелкий и незначительный. Они служат для логической иерархии контента: h1 — это главная тема всей страницы, h2 — подтемы первого уровня, h3 — детали внутри подтем, и так далее. Кроме визуального выделения (размера шрифта и жирности), эти теги критически важны для SEO-продвижения и доступности (скринридеры для незрячих ориентируются на них как на навигацию).
Заголовочная иерархия: от h1 до h6
В HTML существует ровно шесть уровней заголовков. Их часто сравнивают с заголовками в книге или статье: название всей книги — это h1; названия глав — h2; параграфы внутри главы — h3; подпункты параграфа — h4 и так далее. Никогда не нужно пропускать уровни (например, с h1 сразу на h3) — это нарушает логическую структуру и путает поисковые роботы.
| Тег | Значение | Типичное использование | Пример |
|---|---|---|---|
| <h1> | Самый важный заголовок страницы | Один на всю страницу, отражает её основную тему | «Что означают h1, h2, h3 в HTML» (как в этой статье) |
| <h2> | Разделы первого уровня | Основные блоки контента, обычно 3-10 на странице | «Заголовочная иерархия», «Почему важны заголовки для SEO» |
| <h3> | Подразделы внутри h2 | Детализация тем, примеры, списки аргументов | «Сколько раз можно использовать h1?», «Как влияют заголовки на ранжирование» |
| <h4> | Подразделы внутри h3 | Редко, для глубокой структуры (технические статьи, документация) | «Пример кода с вложенными заголовками» |
| <h5> и <h6> | Самый низкий уровень | Почти не используются в обычных сайтах, иногда в сложных разделах помощи или юридических документах | «Подпункт 5.3.1» в многоуровневой инструкции |
Как браузеры и поисковые системы обрабатывают заголовки
Важно понимать: h1-h6 — это не про стиль, а про семантику (смысловое значение). По умолчанию браузеры делают h1 самым крупным, h2 поменьше, h3 ещё меньше, а h6 почти как обычный текст. Но это можно изменить через CSS. Поисковые системы (Google, Яндекс) игнорируют CSS и смотрят исключительно на HTML-теги: контент внутри h1 считается наиболее важным для понимания темы страницы, внутри h2 — важным, внутри h3 — менее важным.
Сколько раз можно использовать h1 на странице
Строго говоря, стандарт HTML не запрещает несколько h1, но по правилам семантической вёрстки и рекомендациям SEO-специалистов на одной странице должен быть один h1. Он обозначает уникальную тему страницы. Если вы используете несколько h1, поисковые роботы могут не понять, что для вас самое главное. Исключения: страницы-лендинги с несколькими разделами, каждый из которых мог бы быть отдельной страницей, но это спорная практика. Безопасный подход — один h1 на страницу.
Иерархия без пропусков
Правильная структура: h1 → h2 → h3 → h4. Нельзя после h1 сразу ставить h3, пропустив h2. Это как в книге: нельзя сделать подглаву без названия самой главы. Такой пропуск сбивает логику как для поисковых систем, так и для скринридеров (программ для незрячих).
Почему заголовки важны для SEO (поисковой оптимизации)
Поисковые алгоритмы анализируют заголовки, чтобы понять структуру и ключевые темы документа. Вот основные моменты:
- h1 — сигнал релевантности: Содержимое h1 сравнивается с поисковым запросом пользователя. Если запрос и h1 совпадают, это сильный плюс к ранжированию.
- h2, h3 — структурирование LSI-ключей: В заголовках второго и третьего уровня естественно размещают связанные ключевые слова и синонимы, что помогает поисковику глубже понять контекст.
- Улучшение поведенческих факторов: Чёткие информативные заголовки помогают пользователю быстро найти нужный блок на странице. Если он задерживается дольше, это положительный сигнал.
- Появление в быстрых ответах: Структурированный текст с заголовками чаще используется Google для создания сниппетов с якорными ссылками (оглавление в выдаче).
Ошибки в использовании заголовков, которые вредят SEO
- Использование h1 исключительно для логотипа (если логотип повторяется на всех страницах).
- Скрытие заголовков (display: none) — поисковики могут расценить как манипуляцию.
- Вставка ключевых слов в h2-h6 не по делу, просто для «плотности» — это уже переоптимизация.
- Пустые заголовки или заголовки-смайлики.
Как заголовки помогают доступности (a11y)
Люди с нарушениями зрения используют экранные дикторы (скринридеры), которые читают страницу вслух. Скринридер имеет режим навигации по заголовкам: пользователь нажимает клавишу H (Heading) и переключается между h1, h2, h3. Если заголовки расставлены правильно, он может быстро пройтись по структуре статьи и выбрать интересующий раздел. Если же заголовки пропущены или используются только визуально через CSS (как просто жирный текст), диктор не увидит структуру, и сайт становится недоступным.
Пример правильной структуры
<h1>Как приготовить кофе в турке</h1>
<h2>Как выбрать турку</h2>
<h3>Материалы турок: медь, керамика, нержавейка</h3>
<h3>Какой объём турки вам нужен</h3>
<h2>Процесс приготовления</h2>
<h3>Правильный помол кофе для турки</h3>
<h3>Соотношение кофе и воды</h3>
<h4>Температура воды на старте</h4>
<h4>Сколько раз доводить до кипения</h4>
Здесь чётко видно: h1 — главная тема, h2 — два крупных раздела, внутри h2 — h3, а внутри некоторых h3 — h4 для уточнений. При этом ни один уровень не пропущен.
Заголовки в разных системах управления (CMS) и конструкторах
Визуальные редакторы современных CMS и конструкторов сайтов позволяют назначать заголовки без написания кода. Например, в Joomla или WordPress при создании статьи вы выбираете уровень заголовка (Заголовок 1, Заголовок 2 и т.д.) из выпадающего списка. В конструкторах (например, SitePro.by или Tilda) — аналогично. При этом важно, чтобы сам шаблон сайта не «ломал» иерархию (например, чтобы h1 не был намеренно уменьшен через CSS до размеров h3 — это сбивает с толку и поисковики, и пользователей).
Распространённые вопросы о заголовках
Может ли h1 быть не первым визуальным элементом на странице?
Да. Технически h1 может быть расположен ниже, например, после шапки и баннера. Но по смыслу и по коду он всё равно остаётся самым главным. Однако с точки зрения UX пользователь ожидает увидеть главный заголовок вверху, поэтому размещать h1 в подвале — плохая практика.
Что делать, если в статье есть «Заголовок 2», но нет «Заголовка 1»?
Это грубая ошибка. Каждая содержательная страница должна начинаться с h1. Если это часть блока, не являющегося основным контентом (например, виджет «похожие статьи»), там не должно быть h2 — используйте другие теги или просто текст.
Можно ли стилизовать заголовки с помощью CSS?
Не только можно, но и нужно. По умолчанию h1 слишком крупный на многих сайтах. Дизайнеры часто уменьшают его до нужных размеров и меняют цвет. Это не нарушает семантику — поисковикам всё равно, как выглядит h1, для них важен сам тег.
Практические рекомендации для веб-мастеров и SEO-специалистов
- Всегда используйте один h1 на страницу, и он должен чётко отвечать на вопрос: «О чём эта страница?».
- Строите иерархию вложенности: не прыгайте с h2 на h4, вставляйте h3.
- Включайте ключевые слова в h1 (естественно, без переспама). В h2-h3 — уточнения и синонимы.
- Не делайте заголовки слишком длинными (рекомендуемая длина h1 — до 60 символов, чтобы полностью отображался в выдаче).
- Для скринридеров обязательно используйте невидимый визуально, но доступный заголовок, если дизайн не предполагает текстового заголовка (например, в карточке товара можно сделать h2 с классом visually-hidden).
Итог: теги от h1 до h6 — это фундамент семантической вёрстки. Они структурируют контент, помогают поисковикам понять страницу и делают сайт удобным для людей с ограниченными возможностями. Игнорирование правильной заголовочной иерархии — одна из главных ошибок, которая одновременно ухудшает SEO и юзабилити.
