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