Тег h3 размечает заголовок подраздела - части, на которые делится раздел с заголовком h2. Тег парный, закрывающий обязателен. Собственных атрибутов в HTML5 у него нет, только глобальные, хотя в HTML 4.01 заголовкам был доступен атрибут align для выравнивания текста - из стандарта его убрали, и выравнивание давно задают стилями.
<h2>Выбор рамы</h2>
<p>Материал рамы определяет вес и цену велосипеда.</p>
<h3>Алюминий</h3>
<p>Лёгкий и недорогой, но жёстче стали.</p>
<h3>Сталь</h3>
<p>Тяжелее, зато хорошо гасит вибрацию.</p>В этой статье
Возврат к верхнему уровню: после h3 снова h2
Про заголовки обычно запоминают одно правило - не пропускать уровни. Из него часто делают неверный вывод, будто разметка может двигаться только вглубь, и, дойдя до h3, там и остаётся до конца страницы. На деле ограничение работает лишь в одну сторону.
Вниз уровень опускается строго по одному: после h2 идёт h3, и перепрыгнуть сразу на h4 нельзя. А вверх возвращаться можно на любой уровень и сколько угодно раз. Закончив подраздел, вы просто снова даёте h2 - это и означает, что начался новый раздел.
<h1>Как выбрать велосипед</h1>
<h2>Выбор рамы</h2>
<h3>Алюминий</h3>
<h3>Сталь</h3>
<h2>Тормоза</h2> <!-- возврат на второй уровень -->
<h3>Ободные</h3>Отступы здесь только для наглядности: заголовки идут подряд, вкладывать их друг в друга нельзя. Уровень задаёт цифра в названии тега, а не положение в разметке.
Причина, по которой возврат разрешён, простая: уровень показывает глубину вложенности, а не порядок следования. Второй h2 не обязан быть «выше» предыдущего h3 по месту на странице - он просто открывает раздел той же значимости, что и первый.
Пример: как выглядит возврат с третьего уровня на второй
Второй заголовок «Тормоза» снова крупный - разметка вернулась на второй уровень, и начался новый раздел.
Как читатель со скринридером увидит такую структуру и что происходит при пропуске уровня, подробно разобрано на странице тега h1. А выбор между вторым и третьим уровнем - на странице тега h2.
Где h3 встречается кроме текста статьи
Если судить по статьям о заголовках, h3 встречается только внутри длинного текста. На реальном сайте он чаще попадается совсем в другом месте - в списках материалов и в блоках сбоку, где заголовков помногу и все они одного веса.
Возьмём страницу со списком статей. Заголовок первого уровня принадлежит самой странице, блок списка подписан тегом h2, а карточки внутри блока получают h3: каждая карточка подчинена блоку, а не странице. Заголовок карточки при этом почти всегда ссылка, и такая разметка полностью валидна - внутрь заголовка можно поместить строчные элементы, в том числе a.
<h2>Свежие статьи</h2>
<article>
<h3><a href="/kak-vybrat-velosiped/">Как выбрать велосипед</a></h3>
<p>Разбираем раму, тормоза и трансмиссию.</p>
</article>Тот же расчёт работает для виджетов сбоку: если блок «Популярное» подписан h2, его пункты становятся h3. Уровень выбирается не по внешнему размеру, а по тому, чему этот заголовок подчинён.
Пример: список карточек с заголовками h3
Один h2 на весь блок и по одному h3 на карточку - в списке заголовков они встанут как три равнозначных пункта внутри раздела.
Какой уровень давать карточке, если блок списка ничем не подписан, разобрано на странице тега article.
Когда подраздел не нужен
Обратная крайность встречается не реже пропущенных уровней: заголовок третьего уровня выдают каждому абзацу подряд, и страница превращается в перечень подписей, за которыми по две строки текста.
Проверка занимает секунду: представьте оглавление этой страницы. Если пункт в нём выглядит осмысленно и по нему захочется перейти - это подраздел. Если он дублирует первую фразу абзаца, заголовок лишний.
Заголовок здесь лишний
Под h3 одна строка, и заголовок просто пересказывает её. В оглавлении получится пункт-пустышка.
Заголовок оправдан
Под h3 несколько абзацев с самостоятельной мыслью, к которой читатель может захотеть вернуться.
Когда выделить часть текста всё-таки нужно, а на подраздел она не тянет, обходятся без заголовка: выделяют первые слова абзаца тегом strong, оформляют перечисление списком или применяют список определений с dt. Все три способа дают визуальный акцент и при этом не добавляют строку в структуру документа.
Частые ошибки
Ошибки с третьим уровнем почти всегда происходят от того, что заголовок выбирают глазами - по тому, какого размера хочется видеть текст, - а не по месту этого текста в структуре.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
После h1 сразу идёт h3 | В структуре пропущен уровень, в списке заголовков появляется провал | Дать h2 либо поднять заголовок до второго уровня |
Разметка не возвращается к h2 и все разделы идут третьим уровнем | Страница выглядит как один раздел с множеством подразделов | Вернуть h2 там, где начинается новая тема |
h3 применён ради размера шрифта | Обычный текст объявляется заголовком подраздела | Оставить абзац и задать размер через font-size |
| Заголовок у каждого абзаца | Оглавление превращается в пересказ текста | Оставить заголовки только у настоящих подразделов |
Заголовок карточки в списке размечен h2 вместо h3 | Каждая карточка объявляется разделом, равным по весу блоку списка | Подчинить карточки заголовку блока и дать им h3 |
