Теги заголовков HTML полное руководство по структуре страницы

Введение

Теги заголовков HTML — это основа логичной структуры любой веб‑страницы. Они помогают браузерам, поисковым системам и читалкам экранов понять, что на странице главное, а что второстепенно. Для вас как для разработчика заголовки — это инструмент, который связывает воедино контент, SEO и доступность.

Смотрите, я покажу вам, как с помощью заголовков можно:

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

Давайте разбираться, какие бывают заголовки и как ими правильно пользоваться.

Что такое теги заголовков HTML

Список тегов заголовков

В HTML есть шесть уровней заголовков:

• <h1> — главный заголовок страницы;
• <h2> — заголовок раздела;
• <h3> — заголовок подраздела;
• <h4> — заголовок под‑подраздела;
• <h5> и <h6> — более мелкие уровни, используются реже, обычно в очень больших документах.

HTML‑фрагмент для примера:

<h1>Руководство по HTML заголовкам</h1> <!-- Главный заголовок страницы -->

<h2>1. Основы структуры документа</h2> <!-- Заголовок раздела -->
<p>Здесь идет текст раздела...</p>

<h3>1.1. Зачем нужны заголовки</h3> <!-- Заголовок подраздела -->
<p>Подробное объяснение...</p>

Как видите, заголовки здесь задают скелет документа: от общего к частному.

Семантика заголовков

Под семантикой в HTML понимают смысл тега, а не его внешний вид. Заголовки:

• описывают структуру документа;
• задают уровни важности информации;
• помогают навигации (и людям, и машинам).

Важно понимать: заголовки — не инструмент для «сделать текст крупным», а именно структурный элемент. За внешний вид отвечает CSS, а за смысл — корректное использование <h1>–<h6>.

Давайте посмотрим, чем теги заголовков отличаются от обычных блоков.

<!-- Плохой подход - используется div только ради размера текста -->
<div class="big-text">Описание товара</div>

<!-- Правильный подход - используется заголовок по смыслу -->
<h2>Описание товара</h2>

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

Иерархия заголовков на странице

Принцип «от общего к частному»

Хорошая страница строится по тому же принципу, что и содержание книги:

• h1 — название книги;
• h2 — главы;
• h3 — подглавы в главе;
• h4 — подразделы внутри подглав и т.д.

Пример иерархии:

<h1>Онлайн курс по HTML</h1>

<h2>Модуль 1. Основы HTML</h2>

<h3>1.1. Структура HTML документа</h3>
<p>Текст урока...</p>

<h3>1.2. Базовые теги</h3>
<p>Текст урока...</p>

<h2>Модуль 2. Семантическая верстка</h2>

<h3>2.1. Семантические теги</h3>
<p>Текст урока...</p>

<h4>2.1.1. Теги article и section</h4>
<p>Подраздел внутри урока...</p>

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

Правила логичной иерархии

Обратите внимание на несколько практических правил:

1. Не перепрыгивайте через уровни без необходимости
   Переходить с h2 сразу на h4 — плохая идея, она ломает иерархию.

   <!-- Плохой пример -->
   <h2>Описание продукта</h2>
   <h4>Технические характеристики</h4> <!-- Пропущен h3 -->
   
   <!-- Лучше так -->
   <h2>Описание продукта</h2>
   <h3>Технические характеристики</h3>

2. Используйте заголовок только если реально начинается новый смысловой блок
   Если это просто фраза в тексте — обычно достаточно абзаца <p> или выделения через <strong>.

3. Не ставьте заголовок, если под ним нет контента
   Пустой заголовок или заголовок с единственной строкой вроде «См. выше» только запутает.

4. Логика важнее «красоты»
   Иногда хочется поставить h4, потому что он визуально поменьше. Лучше сделать h3, а размер текста отрегулировать через CSS.

<h2>Отзывы клиентов</h2>

<!-- Семантика правильная - h3 как подзаголовок раздела -->
<h3>Что говорят пользователи</h3>

<p>Наши клиенты отмечают...</p>

А вот размер и стиль текста для h3 вы меняете стилями:

h3 {
  font-size: 18px;       /* Настраиваем размер */
  font-weight: 600;      /* Толщина шрифта */
  margin-top: 20px;      /* Отступ сверху */
}

Тег h1 — главный заголовок страницы

Роль h1 в документе

Тег h1 описывает основную тему страницы. Если вы уберете все остальное содержимое, по тексту h1 все равно должно быть понятно, о чем эта страница.

• На странице статьи — это название статьи.
• На странице товара — название товара.
• На главной — основная тема или название сайта/сервиса плюс пояснение.

Пример:

<!-- Статья блога -->
<h1>Теги заголовков HTML - полное руководство</h1>

<!-- Карточка товара -->
<h1>Ноутбук X100 16 ГБ ОЗУ 512 ГБ SSD</h1>

<!-- Главная страница компании -->
<h1>Разработка сайтов под ключ в Москве</h1>

Один или несколько h1 на странице

Исторически рекомендовалось использовать один h1 на страницу. HTML5 допускает несколько h1 внутри разных секций (<article>, <section>, <aside>), но:

• поисковые системы и скринридеры по‑прежнему ожидают один основной h1;
• для упрощения лучше придерживаться правила: один h1 на страницу.

Давайте разберемся на примере, как можно использовать h1 в сложной структуре:

<body>
  <header>
    <h1>Блог о веб разработке</h1> <!-- Главный h1 страницы -->
  </header>

  <main>
    <article>
      <h2>Теги заголовков HTML - руководство</h2> <!-- Заголовок статьи -->
      <p>Текст статьи...</p>
    </article>

    <article>
      <h2>Введение в CSS Flexbox</h2> <!-- Вторая статья на странице -->
      <p>Текст статьи...</p>
    </article>
  </main>
</body>

Такой подход проще и для вас, и для поисковиков. Если очень хочется использовать h1 внутри <article>, делайте это осознанно и проверяйте поведение с точки зрения SEO и доступности.

Связь h1 с тегом title

Тег <title> в <head> и <h1> в <body> должны быть логически связаны, но не обязаны быть одинаковыми.

<head>
  <title>Теги заголовков HTML - примеры и лучшие практики</title>
</head>
<body>
  <h1>Теги заголовков HTML - подробное руководство</h1>
</body>

• <title> — для вкладки браузера и поисковой выдачи;
• <h1> — для пользователя на странице.

Смысл один, формулировка может отличаться.

Использование h2–h6 для разбиения контента

Когда использовать h2

h2 — это заголовки основных разделов.

Пример структуры статьи:

<h1>Руководство по HTML формам</h1>

<h2>Введение</h2>
<p>Текст...</p>

<h2>Основные элементы формы</h2>
<p>Текст...</p>

<h2>Валидация данных</h2>
<p>Текст...</p>

Каждый блок «Введение», «Основные элементы» и т.д. — логически отдельный раздел. h2 идеально подходит для этого уровня.

Когда использовать h3

h3 — заголовки подразделов внутри h2.

<h2>Основные элементы формы</h2>

<h3>Тег form</h3>
<p>Текст...</p>

<h3>Поле ввода input</h3>
<p>Текст...</p>

<h3>Многострочное поле textarea</h3>
<p>Текст...</p>

Теперь давайте посмотрим, что происходит в следующем примере с более глубокой структурой.

Глубокая иерархия h4–h6

Для очень больших текстов можно использовать h4–h6:

<h2>Валидация данных</h2>

<h3>Базовая HTML валидация</h3>

<h4>Атрибут required</h4>
<p>Объяснение...</p>

<h4>Атрибут pattern</h4>
<p>Объяснение...</p>

<h3>Кастомная JavaScript валидация</h3>

<h4>Обработка события submit</h4>
<p>Объяснение...</p>

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

Обычно хватает уровней до h3–h4. Если вы доходите до h5–h6, это сигнал, что, возможно, стоит разбить материал на несколько страниц или упростить структуру.

Заголовки и семантические контейнеры HTML5

Взаимодействие с article, section, nav, aside

Семантические контейнеры article, section, nav, aside, main помогают логически группировать контент. Заголовки в них играют роль «названий» блоков.

Покажу вам, как это реализовано на практике:

<main>
  <article>
    <h1>Как использовать теги заголовков HTML</h1> <!-- Заголовок статьи -->
    <p>Текст статьи...</p>
  </article>

  <aside>
    <h2>Популярные статьи</h2> <!-- Заголовок блока сайдбара -->
    <ul>
      <li><a href="#">Семантическая верстка</a></li>
      <li><a href="#">Основы CSS</a></li>
    </ul>
  </aside>
</main>

Здесь:

• <article> — самостоятельный контент (статья), заголовок — h1 или h2, в зависимости от стратегии;
• <aside> — дополнительный контент с собственным заголовком h2.

Когда начинать новую section с заголовка

Рекомендация: каждый <section> должен начинаться с заголовка. Это помогает и людям, и скринридерам.

<section>
  <h2>Характеристики товара</h2>
  <ul>
    <li>Вес 1.2 кг</li>
    <li>Материал алюминий</li>
  </ul>
</section>

<section>
  <h2>Отзывы</h2>
  <p>Пользователи отмечают...</p>
</section>

Если внутри section нет заголовка, возможно, стоит использовать более общий <div>.

Визуальное оформление заголовков через CSS

Почему не стоит подбирать уровень по размеру текста

Иногда разработчики выбирают уровень заголовка из‑за его дефолтного размера. Например, ставят h4, потому что «он выглядит аккуратнее, чем h2». Это приводит к нарушению логики.

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

<h2 class="title-small">Описание товара</h2> <!-- Семантика правильная -->

/* Здесь мы настраиваем внешний вид h2 через класс */
.title-small {
  font-size: 18px;    /* Делаем заголовок визуально меньше */
  font-weight: 500;
}

Базовая стилизация заголовков

Давайте разберемся на примере простой системы заголовков:

h1 {
  font-size: 32px;      /* Самый крупный заголовок */
  margin: 0 0 24px;
}

h2 {
  font-size: 24px;      /* Заголовки разделов */
  margin: 32px 0 16px;
}

h3 {
  font-size: 20px;      /* Подразделы */
  margin: 24px 0 12px;
}

h4 {
  font-size: 18px;
  margin: 20px 0 10px;
}

Так вы сохраняете визуальную и логическую иерархию: чем выше уровень заголовка, тем он заметнее.

Заголовки и доступность (a11y)

Как скринридеры используют заголовки

Люди, использующие скринридеры, часто перемещаются по странице именно по заголовкам:

• получают список всех заголовков;
• переходят от заголовка к заголовку клавишами;
• «просматривают» структуру документа по уровням.

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

Пример правильной структуры с точки зрения доступности:

<h1>Руководство пользователя</h1>

<h2>Начало работы</h2>
<p>Текст...</p>

<h2>Настройки приложения</h2>

<h3>Общие настройки</h3>
<p>Текст...</p>

<h3>Уведомления</h3>
<p>Текст...</p>

Рекомендации для доступности

1. Не пропускайте уровни без причины
   Переход с h2 на h4 воспринимается как ошибка структуры.

2. Не используйте заголовки только ради визуального эффекта
   Если элемент не обозначает начало нового смыслового блока, обычно это не заголовок.

3. Не вставляйте в заголовки только иконки
   Или добавляйте скрытый текст для скринридеров.

<h2>
  <span aria-hidden="true">★</span> <!-- Иконка только для визуала -->
  <span class="visually-hidden">Рейтинг товара</span> <!-- Текст для скринридеров -->
</h2>

/* Класс для визуального скрытия, но доступного для скринридеров текста */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

4. Избегайте слишком длинных заголовков
   Заголовок — это ориентир. Лучше вынести детали в текст, а заголовок сделать более лаконичным.

Заголовки и SEO

Как поисковые системы воспринимают заголовки

Поисковые системы используют заголовки, чтобы:

• понять основную тему страницы (h1);
• определить ключевые подтемы (h2, h3);
• связать структуру страницы с поисковыми запросами.

При этом заголовки — не магическая кнопка, а один из факторов:

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

Рекомендации по SEO‑использованию заголовков

1. Включайте ключевые фразы естественно
   Не нужно повторять один и тот же ключ во всех заголовках. Лучше распределите их по смыслу.

   <h1>Купить наушники с шумоподавлением</h1>
   
   <h2>Преимущества наушников с шумоподавлением</h2>
   <h2>Как выбрать наушники для работы и путешествий</h2>
   <h2>Ответы на частые вопросы о наушниках</h2>

2. Избегайте «простыней» заголовков
   Переспам в заголовках (слишком много ключей, бессмысленные цепочки слов) может навредить.

3. Делайте структуру удобной
   Если пользователю легко найти нужный раздел по заголовкам, это положительный сигнал.

4. Не дублируйте h1 на разных страницах без необходимости
   Для блога: у каждой статьи свой уникальный h1.
   Для магазина: у каждой карточки товара — уникальный h1 с названием.

Примеры хорошей и плохой структуры с точки зрения SEO

Плохой пример — переоптимизация:

<h1>Ноутбук купить недорого</h1>
<h2>Ноутбук недорого купить</h2>
<h2>Купить ноутбук недорого цена</h2>

Хороший пример — естественная структура:

<h1>Как выбрать ноутбук для работы и учебы</h1>

<h2>Основные характеристики ноутбука</h2>
<h3>Процессор</h3>
<h3>Оперативная память</h3>
<h3>Накопитель и его тип</h3>

<h2>Ноутбук для учебы</h2>
<h2>Ноутбук для работы</h2>

Практические шаблоны использования заголовков

Страница статьи в блоге

Давайте разберемся на примере типичной статьи:

<article>
  <h1>Теги заголовков HTML - как правильно выстраивать структуру</h1>

  <p>Краткое вступление...</p>

  <h2>Зачем нужны заголовки</h2>
  <p>Текст...</p>

  <h2>Основные уровни заголовков</h2>

  <h3>Главный заголовок h1</h3>
  <p>Текст...</p>

  <h3>Подзаголовки разделов h2</h3>
  <p>Текст...</p>

  <h3>Подразделы h3 и ниже</h3>
  <p>Текст...</p>

  <h2>Ошибки при использовании заголовков</h2>
  <p>Текст...</p>
</article>

Здесь структура отражает логику рассказа и легко конвертируется в содержание.

Страница товара в интернет‑магазине

Теперь вы увидите, как это выглядит в коде для карточки товара:

<main>
  <h1>Смартфон XPhone 256 ГБ черный</h1> <!-- Название товара -->

  <section>
    <h2>Краткое описание</h2>
    <p>Флагманский смартфон с мощной камерой...</p>
  </section>

  <section>
    <h2>Характеристики</h2>

    <h3>Экран</h3>
    <ul>
      <li>Диагональ 6.5"</li>
      <li>Разрешение 2400x1080</li>
    </ul>

    <h3>Производительность</h3>
    <ul>
      <li>Процессор 8 ядер</li>
      <li>ОЗУ 8 ГБ</li>
    </ul>
  </section>

  <section>
    <h2>Отзывы покупателей</h2>
    <p>Текст отзывов...</p>
  </section>
</main>

Лэндинг с несколькими блоками

Для одностраничного сайта (лендинга) структура может выглядеть так:

<h1>Сервис онлайн бухгалтерии для малого бизнеса</h1>

<section>
  <h2>Преимущества сервиса</h2>
  <p>Текст...</p>
</section>

<section>
  <h2>Как это работает</h2>

  <h3>Шаг 1 - Регистрация</h3>
  <h3>Шаг 2 - Подключение банка</h3>
  <h3>Шаг 3 - Автоматический учет</h3>
</section>

<section>
  <h2>Тарифы</h2>
  <p>Список тарифов...</p>
</section>

<section>
  <h2>Ответы на вопросы</h2>
  <p>FAQ...</p>
</section>

Такая структура хорошо воспринимается и людьми, и поисковыми системами.

Типичные ошибки при работе с заголовками

Использование заголовков для стилизации

Одна из самых частых ошибок — использовать h1–h6 просто чтобы сделать текст крупнее или жирнее.

<!-- Плохой пример - заголовок вместо стиля -->
<h3>Скидка 50 процентов</h3>

<!-- Лучше так - обычный текст с классом -->
<p class="highlight">Скидка 50 процентов</p>

.highlight {
  font-size: 20px;    /* Делаем текст крупным */
  font-weight: bold;  /* Делаем текст жирным */
  color: red;
}

Чрезмерное количество заголовков

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

Признаки переизбытка заголовков:

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

Отсутствие h1 на странице

Иногда при верстке по макету забывают про главный заголовок — особенно если дизайнер не обозначил его явно. Страница без h1:

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

В таких случаях имеет смысл проанализировать смысл страницы и добавить соответствующий h1, даже если в макете он визуально ничем не выделяется сильно.

Несогласованная иерархия уровнями

Пример проблемной структуры:

<h1>Наши услуги</h1>

<h3>Разработка сайтов</h3> <!-- Пропущен h2 -->
<p>Текст...</p>

<h2>Продвижение</h2> <!-- Возврат к более высокому уровню -->
<p>Текст...</p>

Лучше выстроить уровни последовательно:

<h1>Наши услуги</h1>

<h2>Разработка сайтов</h2>
<p>Текст...</p>

<h2>Продвижение</h2>
<p>Текст...</p>

Как проверить и отладить структуру заголовков

Быстрая проверка в браузере

Проще всего — открыть инструменты разработчика и посмотреть:

1. Во вкладке Elements (или Анализ) найти теги h1–h6.
2. Оценить, нет ли:
   • нескольких h1 без необходимости;
   • пропусков уровней;
   • блоков с текстом, которые по смыслу должны быть заголовками.

Использование консольного скрипта

Вот простой скрипт, который выводит все заголовки в консоль с их уровнями и текстом:

// Здесь мы выбираем все теги h1-h6 на странице
const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

// Здесь мы проходим по каждому заголовку и выводим его уровень и текст
headings.forEach(h => {
  console.log(h.tagName + ' - ' + h.textContent.trim());
});

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

Линтеры и проверки доступности

Если вы используете инструменты типа:

• eslint‑плагины для JSX (например, eslint-plugin-jsx-a11y);
• проверку Lighthouse в Chrome DevTools;
• специализированные плагины редакторов,

они часто подсвечивают:

• пропущенные уровни заголовков;
• отсутствие h1;
• заголовки без текста.

Это хороший способ контролировать качество верстки на уровне проекта.

Заключение

Теги заголовков HTML — это не просто крупный шрифт, а основа семантики страницы. От того, насколько аккуратно вы выстроите иерархию от h1 до h6, зависит:

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

Ключевые выводы:

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

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

Частозадаваемые технические вопросы и ответы

Как в JSX или React правильно использовать заголовки если компоненты переиспользуются

Старайтесь не зашивать жестко уровни заголовков внутрь компонентов. Передавайте уровень через пропсы или рендер‑проп.

Пример:

// Здесь мы создаем универсальный компонент заголовка
function Heading({ level = 2, children }) {
  const Tag = 'h' + level; // Выбираем нужный тег
  return <Tag>{children}</Tag>;
}

// Здесь мы используем его с разными уровнями
<Heading level={1}>Главный заголовок</Heading>
<Heading level={3}>Подзаголовок</Heading>

Так вы сохраняете семантику в разных местах использования.

Как сделать кликабельный заголовок с якорной ссылкой

Используйте id на заголовке и ссылку с href на этот id.

<h2 id="install">Установка</h2> <!-- Идентификатор заголовка -->

<a href="#install">Перейти к разделу Установка</a> <!-- Ссылка-якорь -->

Для автогенерации якорей можно использовать плагины Markdown или скрипты, но принцип тот же.

Как скрыть заголовок визуально но сохранить его для SEO и скринридеров

Используйте класс «визуально скрытый» вместо display none.

<h1 class="visually-hidden">Руководство пользователя</h1>

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

Так заголовок останется доступным для поисковиков и читалок.

Как сделать вложенные заголовки внутри компонентов UI например аккордеонов

Опирайтесь на контекст. Сам компонент аккордеона не должен навязывать уровень заголовка. Передавайте его снаружи.

function AccordionSection({ headingLevel, title, children }) {
  const Tag = 'h' + headingLevel;
  return (
    <section>
      <Tag>{title}</Tag> {/* Здесь мы используем нужный уровень */}
      <div>{children}</div>
    </section>
  );
}

Так вы сможете вставить аккордеон в разные места структуры без нарушения иерархии.

Как программно изменить уровень всех заголовков при вставке контента например в виджет

Если вы встраиваете кусок HTML на страницу и хотите понизить уровень всех заголовков на один:

// Здесь мы выбираем корневой элемент вставленного блока
const container = document.getElementById('embedded-content');

// Здесь мы находим все заголовки внутри него
container.querySelectorAll('h1, h2, h3, h4, h5').forEach(h => {
  const level = Number(h.tagName[1]); // Получаем номер уровня
  const newLevel = level + 1;         // Повышаем номер (понижаем важность)
  const newTag = 'h' + newLevel;

  const newHeading = document.createElement(newTag); // Создаем новый тег
  newHeading.innerHTML = h.innerHTML;               // Копируем содержимое

  h.replaceWith(newHeading); // Заменяем старый заголовок новым
});

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