Заголовки h1–h6

Учимся выстраивать иерархию заголовков — каркас, на котором держится вся страница.

В HTML есть шесть уровней заголовков: от <h1> (самый главный) до <h6> (самый мелкий).

Шесть уровней

Заголовки задают структуру документа, как оглавление в книге. h1 — название всей страницы, h2 — крупные разделы, h3 — подразделы внутри них, и так далее до h6:

<h1>Рецепт борща</h1>
<h2>Ингредиенты</h2>
<h3>Для бульона</h3>
<h3>Для заправки</h3>
<h2>Приготовление</h2>

Браузер по умолчанию рисует h1 самым крупным шрифтом, а каждый следующий уровень — мельче. Но размер — не главное. Главное — смысловая иерархия.

Почему иерархия важна

Заголовки — это не «крупный жирный текст». Это структура, которой пользуются:

Поисковики — по заголовкам они понимают, о чём страница и что на ней главное.
Программы чтения с экрана — незрячие пользователи перемещаются по странице, перепрыгивая между заголовками. Правильная структура — это доступность.
Вы сами — по заголовкам легко ориентироваться в коде.

Правило одного h1

На странице должен быть один h1 — это её главная тема, как название у книги. Остальные заголовки — h2, h3 и ниже. Не пропускайте уровни: после h2 идёт h3, а не сразу h5.

Так делать НЕ надо — заголовок выбран ради размера, а не смысла:

<h4>Большой важный текст</h4>

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

Памятка по уровням

Тег	Роль
`<h1>`	название всей страницы (один на странице)
`<h2>`	крупные разделы
`<h3>`	подразделы внутри h2
`<h4>–<h6>`	более глубокая вложенность (нужны редко)

Заголовки как оглавление

Полезно представлять заголовки страницы как автоматическое оглавление книги. Если выписать только теги h1–h6 по порядку, должна получиться логичная структура, по которой понятно, о чём страница, даже не читая остального текста:

<h1>Уход за комнатными растениями</h1>
  <h2>Полив</h2>
  <h2>Освещение</h2>
    <h3>Растения для тени</h3>
    <h3>Растения для солнца</h3>

Здесь сразу видно: одна большая тема, два раздела, и у второго — два подраздела. Именно так, между прочим, на многих сайтах автоматически строится блок «Содержание» — он собирается из ваших заголовков. Аккуратная иерархия заголовков сразу даёт читателю удобную навигацию.

Итог

Заголовки h1–h6 задают смысловую иерархию страницы.
На странице один h1; уровни не пропускают.
Выбирайте уровень по смыслу, а не по размеру — за размер отвечает CSS.