Тег h2 размечает заголовок раздела - той части страницы, на которые разбито её содержимое. Если h1 описывает страницу целиком, то h2 описывает один её кусок. Тег парный: нужен и открывающий, и закрывающий. Собственных атрибутов у него нет, доступны только глобальные - class, id, lang и остальные, общие для любого элемента.
<h1>Как выбрать велосипед</h1>
<h2>Выбор рамы</h2>
<p>Алюминий, сталь и карбон ведут себя по-разному.</p>
<h2>Тормоза</h2>
<p>Ободные проще в обслуживании, дисковые надёжнее в дождь.</p>Пример: как браузер выводит h2 после h1
Это настоящая страница внутри страницы, без единой строчки CSS - поэтому шрифт здесь браузерный, а не наш. Видно, что разделов два и открывает каждый свой h2.
В этой статье
Сколько тегов h2 может быть на странице
С h1 вопрос спорный и там есть о чём поговорить, а с h2 всё просто: сколько угодно. Ограничения нет ни в спецификации, ни в рекомендациях поисковых систем, и оно бы противоречило самому смыслу тега.
Разница между двумя тегами не в количестве, а в роли. Заголовок первого уровня отвечает на вопрос, о чём эта страница, и ответ на него может быть только один. Заголовок второго уровня отвечает на вопрос, из каких частей страница состоит, - а частей столько, сколько их получилось. Восемь разделов дадут восемь h2, и это нормальная разметка.
| Признак | h1 | h2 |
|---|---|---|
| Сколько на странице | Один | Сколько получилось разделов |
| Что описывает | Страницу целиком | Один раздел страницы |
| Место в структуре | Первый заголовок | Идёт после h1 |
| Если его нет | У страницы нет названия | Страница просто не разбита на разделы |
Обратная ситуация тоже встречается: раздел на странице ровно один, и его всё равно подписывают h2. Стоит проверить себя вопросом, от чего этот раздел отделён. Если ни от чего, то это не раздел, а всё содержимое страницы, и у него уже есть заголовок - h1.
Почему подзаголовок страницы - это не h2
Здесь прячется ошибка, которую легко не заметить. Под главным заголовком пишут поясняющую строку - слоган, уточнение, короткое описание, - и оборачивают её в h2, потому что внешне это похоже на заголовок поменьше. Путаница настолько обычная, что даже справочники называют свои статьи про этот тег словом «подзаголовок», а в тексте объясняют его как заголовок раздела.
Беда в том, что h2 открывает новый раздел. Поясняющая строка никакого раздела не открывает, и в списке заголовков, по которому перемещается читатель программы чтения с экрана, появляется пункт-пустышка: заголовок есть, а раздела за ним нет.
Для этого случая в HTML есть отдельный элемент - hgroup. Он группирует один заголовок с идущими рядом абзацами: заголовок остаётся заголовком, а поясняющая строка остаётся абзацем и в структуру документа не попадает. Сам hgroup на структуру тоже не влияет, и доступен он давно - в браузерах с июля 2015 года.
<!-- Так не надо: подзаголовок открывает новый раздел, которого нет -->
<h1>Как выбрать велосипед</h1>
<h2>Понятное руководство для новичка</h2>
<h2>Выбор рамы</h2>
<!-- Так надо: поясняющая строка остаётся абзацем -->
<hgroup>
<h1>Как выбрать велосипед</h1>
<p>Понятное руководство для новичка</p>
</hgroup>
<h2>Выбор рамы</h2>Пример: как выглядят оба варианта в браузере
Подзаголовок размечен тегом h2
Подзаголовок оставлен абзацем внутри hgroup
На вид разница небольшая, но она есть: во втором варианте поясняющая строка и выглядит строкой, а не заголовком раздела. Важнее то, чего на вид не заметно, - в первом варианте у страницы два раздела, во втором один.
Теги h2 и h3: когда нужен следующий уровень заголовка
Выбор между h2 и h3 сводится к одному вопросу: взять следующий уровень или остаться на текущем. Подсказка «h3 поменьше, чем h2» здесь не помогает, потому что размер тут ни при чём - его задают стилями, а на структуру страницы он не влияет.
Работает один простой критерий. Если новый блок раскрывает то, о чём шла речь в предыдущем разделе, - это h3 внутри него. Если новый блок открывает отдельную тему и предыдущий раздел на этом закончился - это снова h2.
<h2>Выбор рамы</h2>
<h3>Алюминий</h3>
<h3>Сталь</h3>
<h3>Карбон</h3>
<h2>Тормоза</h2>
<h3>Ободные</h3>
<h3>Дисковые</h3>Отступы в примере сделаны только для наглядности - вкладывать заголовки друг в друга не нужно и нельзя, они идут подряд. Уровень задаёт цифра в названии тега, а не расположение в разметке.
Заметьте и обратный ход: после трёх h3 разметка возвращается к h2. Возвращаться к любому верхнему уровню можно свободно, а вот перепрыгивать вниз через уровень - с h2 сразу на h4 - нельзя, и почему именно, подробно разобрано на странице тега h1.
Отдельно о глубине. Теги h4, h5 и h6 существуют и валидны, но в обычном тексте нужны редко: три уровня вложенности - это уже довольно подробная структура. Если в материале понадобился h5, чаще это признак того, что материал стоит разбить на несколько страниц, а не углублять дальше.
Частые ошибки
Все ошибки ниже объединяет одно: h2 применяют как оформление, а браузер и программа чтения с экрана читают его как структуру.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Подзаголовок страницы размечен тегом h2 | В структуре появляется раздел, которого на странице нет | Применить hgroup с заголовком и абзацем |
h2 применён ради крупного шрифта | Обычный текст становится заголовком раздела | Оставить абзац и задать размер через font-size |
Страница начинается сразу с h2 | В списке заголовков нет названия страницы | Добавить h1 перед первым h2 |
Внутри одного раздела идут два h2 подряд без текста между ними | Первый раздел оказывается пустым | Свести в один заголовок или добавить содержимое |
Весь текст разделов обёрнут в h2 | Страница превращается в список заголовков без содержимого | Заголовком размечать только название раздела |
