Тег h5 размечает заголовок пятого уровня. Тег парный, закрывающий обязателен, собственных атрибутов нет, только глобальные. С него начинается любопытный перелом: по умолчанию браузер выводит h5 мельче обычного текста, добавляя только жирное начертание. Первые три уровня крупнее текста, h4 ровно вровень с ним, а пятый и шестой уже меньше - заголовок перестаёт быть заметнее того, что он озаглавливает.
<h4>Читайте также</h4>
<h5>Как выбрать раму</h5>
<h5>Чем смазывать цепь</h5>Сколько раз пятый уровень встречается на самом деле
О пятом уровне принято говорить как об экзотике, которая никому не нужна. Проверить это можно не на ощущениях, а по данным: проект Web Almanac считает теги на миллионах реальных страниц, и заголовки там разобраны отдельно.
| Тег | Всего вхождений | В среднем на страницу |
|---|---|---|
h1 | 10,5 млн | 1,66 |
h2 | 37,3 млн | 5,88 |
h3 | 44,1 млн | 6,96 |
h4 | 20,5 млн | 3,23 |
h5 | 8,6 млн | 1,36 |
h6 | 3,5 млн | 0,56 |
Данные Web Almanac за 2020 год , выборка - 6,3 миллиона мобильных страниц. Это последний выпуск, где заголовки считали отдельно, так что цифры стоит читать как порядок величин, а не как сегодняшний срез.
Восемь с половиной миллионов вхождений - это не экзотика. Пятый уровень применяется реже четвёртого примерно вдвое, ровно как четвёртый реже третьего, и в этом ряду нет никакого обрыва: глубина просто убывает.
А главная неожиданность в таблице вовсе не про h5. Самый частый заголовок в вебе - не h1 и даже не h2, а h3. Объясняется это просто: заголовки первого и второго уровня приходятся на страницу по одному-двум, а третьим уровнем подписаны карточки в списках и пункты виджетов, которых на странице бывает по десятку.
Откуда h5 берётся в шаблонах
Если пятый уровень не редкость, откуда он берётся? В тексте статьи он почти не нужен: четыре уровня - уже подробная структура, и о том, где оправдан хотя бы четвёртый, есть отдельный разбор на странице тега h4. Но страница состоит не только из текста.
Глубину создаёт вложенность блоков. Статья с заголовком первого уровня делится на разделы, раздел - на подразделы, а внутри подраздела оказывается врезка «Читайте также» со своими карточками. Каждый вложенный блок опускает уровень на ступень, и пятый появляется сам собой - не потому, что текст такой глубокий, а потому, что блок оказался внутри блока внутри блока.
Пример: как текст доходит до пятого уровня
Текст статьи дошёл только до третьего уровня. Четвёртый и пятый появились внутри врезки - их создала вложенность блоков, а не глубина изложения.
Отсюда растёт и известная трудность шаблонов: готовый блок не знает, на какой глубине окажется. Врезка «Читайте также» на главной странице попадёт на второй уровень, а внутри подраздела статьи - на четвёртом, и уровни её собственных заголовков должны съезжать вместе с ней. В шаблоне это решают параметром, который передаётся блоку снаружи, а не жёстко прописанным тегом внутри.
Ровно для этой задачи в стандарт и добавили атрибуты headingoffset и headingreset: они сдвигают вычисленный уровень заголовков внутри блока, не меняя сами теги. Применять их пока рано - поддержки в обычных сборках браузеров нет, - но знать, какую проблему они решают, полезно уже сейчас. Подробнее о них на странице тега h1.
Частые ошибки
У пятого уровня своя беда: он мельче основного текста, поэтому его почти никогда не берут ради размера - зато легко забывают, что это вообще заголовок, и используют как обычный текст.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
h5 применён как обычный текст под картинкой | В структуре появляется заголовок, за которым нет раздела | Применить figcaption внутри figure |
| Уровни блока прописаны жёстко | При переносе блока в другое место структура рвётся | Передавать уровень заголовка параметром шаблона |
После h3 сразу идёт h5 | Пропущен четвёртый уровень, в структуре появляется провал | Дать h4 либо поднять заголовок до четвёртого уровня |
| Пятый уровень в обычной статье | Структура подробнее текста, оглавление длиннее содержания | Ограничиться тремя уровнями, глубину оставить блокам |
