Заголовки h1–h6 в HTML: как построить понятную иерархию

Элементы <h1>–<h6> обозначают уровни заголовков в документе. Цифра показывает не размер текста, а место раздела в структуре: <h1> — тема страницы, <h2> — крупная часть этой темы, <h3> — подраздел внутри <h2> и так далее.

Внешний вид заголовков задаётся CSS. Выбирать <h4> только потому, что браузер показывает его мелким шрифтом, нельзя.

Как работает иерархия

Представьте статью как оглавление книги:

H1: Как выбрать ноутбук  H2: Определите задачи    H3: Учёба и офис    H3: Монтаж видео  H2: Сравните характеристики    H3: Процессор    H3: Оперативная память​

Та же структура в HTML:

<main>  <article>    <h1>Как выбрать ноутбук</h1>​    <section>      <h2>Определите задачи</h2>​      <h3>Учёба и офис</h3>      <p>Для документов и браузера не нужна дискретная видеокарта.</p>​      <h3>Монтаж видео</h3>      <p>Обратите внимание на процессор, память и охлаждение.</p>    </section>​    <section>      <h2>Сравните характеристики</h2>      <p>Проверяйте параметры в контексте своих задач.</p>    </section>  </article></main>​

Читатель видит смысловые уровни, даже если CSS отключён. Пользователь скринридера может открыть список заголовков и быстро перейти к нужному разделу.

Сколько <h1> должно быть на странице

HTML допускает несколько заголовков первого уровня, но для обычной страницы практичнее использовать один понятный <h1>, который описывает её основную тему. Так структура проще для редакторов, пользователей вспомогательных технологий и поисковых систем.

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

<header>  <a href="/" class="site-logo">Code4web</a></header>​<main>  <h1>Заголовки h1–h6 в HTML</h1></main>​

Можно ли пропускать уровни

Старайтесь не переходить с <h2> сразу на <h4>. Такой скачок выглядит так, будто в документе пропущен подраздел. Если новый фрагмент относится к текущему <h2>, используйте <h3>.

Обратный переход допустим: после подраздела <h3> можно начать следующий крупный раздел с <h2>.

<h2>Установка</h2><h3>Требования</h3><h3>Настройка</h3>​<h2>Первый запуск</h2>​

Глубина не обязана доходить до <h6>. Большинству статей хватает двух или трёх уровней. Слишком глубокая вложенность часто указывает, что материал стоит упростить или разделить.

Заголовок — не подпись и не декоративная строка

Используйте заголовок, если он открывает раздел содержимого. Для других задач есть отдельные элементы:

• подпись поля формы — <label>;
• подпись изображения — <figcaption>;
• вводный текст — <p>;
• название карточки, если оно не создаёт раздел, может быть обычным абзацем или ссылкой.

Не добавляйте пустые заголовки ради отступов и не скрывайте важный заголовок через display: none только ради визуального макета.

Размер и уровень задаются независимо

CSS-класс позволяет оформить разные уровни одинаково, не разрушая структуру:

<h2 class="heading heading--large">Основы доступности</h2><h3 class="heading heading--large">Проверка клавиатурой</h3>​

.heading--large {  font-size: clamp(1.75rem, 4vw, 3rem);  line-height: 1.1;}​

Смысл определяет HTML, внешний масштаб — CSS.

Заголовки и SEO

Хорошая иерархия помогает поисковой системе понять тему и части документа, но заголовки не следует заполнять повторяющимися ключевыми фразами. Пишите их прежде всего для человека:

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

Заголовок Заключение статьи по теме как использовать h1 в HTML хуже, чем Что запомнить: первая версия неестественна и ничего не объясняет читателю.

Как проверить структуру

1. Выпишите только <h1>–<h6> в отдельный список.
2. Убедитесь, что один <h1> называет страницу.
3. Проверьте, что каждый <h3> относится к ближайшему предыдущему <h2>.
4. Уберите пустые, повторяющиеся и декоративные заголовки.
5. Прочитайте список без основного текста: он должен напоминать связное оглавление.

Инструменты разработчика и расширения для проверки доступности могут показать outline, но окончательное решение зависит от смысла текста.

Что запомнить

Уровни заголовков отражают структуру, а не размер шрифта. Начните с одного ясного <h1>, делите материал на разделы <h2> и добавляйте <h3> только для реальных подразделов. Последовательная иерархия облегчает чтение, навигацию со скринридером и дальнейшую редактуру страницы.

report Сообщить об ошибке в статье