Тег h4 размечает заголовок четвёртого уровня - подраздел внутри подраздела. Тег парный, закрывающий обязателен, собственных атрибутов нет, только глобальные. Любопытная деталь, которая многое объясняет: по умолчанию браузер выводит h4 тем же размером, что и обычный текст, добавляя только жирное начертание. Первые три уровня крупнее основного текста, четвёртый - уже нет, и именно поэтому его так часто берут просто ради жирной строки.
<h2>Свойство border</h2>
<h3>Составные свойства</h3>
<h4>border-width</h4>
<h4>border-style</h4>
<h4>border-color</h4>Отступы в примере только для наглядности - заголовки идут подряд, вкладывать их друг в друга нельзя.
Где четвёртый уровень оправдан
В обычной статье до четвёртого уровня дело почти не доходит: тема, разделы, подразделы - и содержимое заканчивается. Но есть целый класс документов, где четыре уровня не роскошь, а естественная глубина материала.
Общее у них одно: это не текст, который читают подряд, а текст, в котором ищут конкретный пункт. Справочник по CSS-свойству, техническая документация, договор, каталог товаров, регламент. Читатель приходит за одним абзацем из ста, и чем точнее разложена структура, тем быстрее он до него добирается.
В справочнике цепочка выглядит так: раздел о свойстве, внутри него подраздел о составных свойствах, а внутри - по заголовку на каждое из них. Четвёртый уровень здесь не украшение: border-width и border-color - самостоятельные темы, за каждой читатель может прийти отдельно.
Пример: четыре уровня в справочной статье
Четвёртый уровень по умолчанию не крупнее обычного текста - разницу между h3 и h4 держит не размер, а место в структуре.
Тот же расчёт работает в договоре, где статья делится на пункты, а пункт на подпункты, и в каталоге, где категория делится на подкатегории, а те - на товарные группы. Везде, где документ предназначен для поиска по нему, а не для чтения подряд, четвёртый уровень появляется сам собой.
Как проверить, что h4 здесь нужен
Проверка короткая и работает лучше любых рассуждений о важности заголовка. Посмотрите на подраздел третьего уровня и спросите себя: состоит ли он из нескольких самостоятельных частей, за каждой из которых читатель может прийти отдельно?
Если да - это честные h4. За border-style приходят отдельно от border-color, и оба заслуживают собственной строки в оглавлении. Если же части подраздела имеют смысл только вместе и по отдельности их никто искать не станет, четвёртый уровень лишний: перед вами один цельный текст, который просто разбит на абзацы.
Когда проверка не проходит, а выделить фрагмент всё-таки хочется, заголовок не нужен - подойдут выделение первых слов абзаца, список или список определений. Подробнее об этом на странице тега h3.
Бывает и обратное: проверка проходит, но уровней перестаёт хватать - подразделы четвёртого уровня сами делятся на части. Это верный признак, что материал перерос одну страницу и его пора делить, а не углублять дальше. Почему так, разобрано на странице тега h2.
Частые ошибки
Четвёртый уровень страдает от одной беды чаще остальных: его выбирают не по структуре, а по внешнему виду - потому что по умолчанию он выглядит как жирная строка обычного размера.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
h4 применён вместо жирной строки | Обычный абзац объявляется подразделом четвёртого уровня | Выделить текст тегом strong или оформить списком |
После h2 сразу идёт h4 | Пропущен третий уровень, в структуре появляется провал | Дать h3 либо поднять заголовок до третьего уровня |
| Четвёртый уровень в короткой статье | Структура подробнее самого текста, оглавление длиннее содержания | Ограничиться двумя-тремя уровнями |
h4 выбран потому, что h3 «слишком крупный» | Уровень заголовка меняется ради размера шрифта | Оставить верный уровень и задать размер через font-size |
