Разметка для подзаголовков

Если вы ещё не знаете, в HTML5 элемент hgroup признан устаревшим.

В спецификацию HTML были добавлены рекомендации по разметке для подзаголовков с использованием существующих и поддерживаемых браузерами элементов HTML.

Советы по разметке подзаголовков

Перед каждым разработчиком возникает важный вопрос: «Как должна выглядеть разметка для этой пакости?»

Чтобы помочь нам, в спецификацию HTML были добавлены рекомендации по разметке для подзаголовков:

Примечание: Элементы h1–h6 для заголовков стоит использовать только в том случае когда они служат заголовком для нового раздела или подраздела текста.

В следующем примере заголовок и подзаголовки для веб-страницы сгруппированы с помощью элемента header. Для добавления в разметку подзаголовков использованы элементы p, так как по замыслу разработчика подзаголовки не должны добавляться в содержание и не обозначают начало нового раздела. Под примером кода представлен пример заголовка и подзаголовков c примененными к ним стилями.

<header>
<h1>HTML 5.1 Nightly</h1>
<p>A vocabulary and associated APIs for HTML and XHTML</p>
<p>Editor's Draft 9 May 2013</p>
</header>

Пример 1

Книжный подзаголовок можно разместить в той же строке что и заголовок и отделить его двоеточием.

<h1>The Lord of the Rings: The Two Towers</h1>

Пример 2

Название альбома помещено в элемент span, что позволяет применить к нему дополнительные стили.

<h1>The Mothers
<span>Fillmore East - June 1971</span>
</h1>

Пример 3

Заголовок и лид в новостной статье можно сгруппировать элементом header. Заголовок находится в h2, а лид — в p.

<header>
<h2>3D films set for popularity slide </h2>
<p>First drop in 3D box office projected for this year despite hotly tipped
summer blockbusters, according to Fitch Ratings report</p>
</header>

Пример 4

Примечание: Некоторые предлагали использовать для разметки подзаголовков элемента small. Рабочая группа HTML провела обсуждение этого предложения, но никаких весомых доводов в пользу такого решения не найти не удалось. Следовательно, small для разметки подзаголовков использовать нежелательно.

А как насчёт сводки документа?

Если вы хотите чтобы подзаголовок отображался в полу мифической сводке документа, добавьте его вместе с текстом заголовка так же как это сделано в примерах 1 и 2. В противном случае поместите текст подзаголовка в элемент p, например, как в третьем примере.

Вопросы к разработчикам

Покрывают ли советы спецификации все сценарии использования подзаголовков, с которыми вы встречались? Если нет, какие ещё советы нужно добавить в спецификацию? Считаете ли вы приведенные примеры понятными и однозначными? Если нет, как на ваш взгляд их можно улучшить? Если у вас возникли вопросы, задайте их в комментариях!

Если вас заинтересовала эта тема, вы можете присоединиться ко мне и моим единомышленникам: Брюсу Лоусону (Bruce Lawson), Яну Девлину (Ian Devlin) и остальным в рабочей группе HTML и принять участвие в дальнейшем обсуждении.

Значение понятия «устаревший» в HTML5

элемент не должен использоваться

hgroup, как и другие устаревшие элементы, не являются частью стандарта. Это значит, что когда при проверке на соответствие стандартам будет найден элемент hgroup, вы увидите сообщение об ошибке. Вот текст ошибки, полученной при проверке с помощью сервиса валидации разметки W3C Markup Validation Service:

Ошибка: Элемент hgroup устарел. Для разметки подзаголовков поместите текст подзаголовка в элемент p после элемента h1-h6, содержащего главный заголовок, или же поместите подзаголовок непосредственно в элемент h1-h6, содержащий главный заголовок, разделив заголовок и подзаголовок символом пунктуации и/или поместив подзаголовок в элемент span с другой стилизацией. Чтобы сгруппировать заголовки и подзаголовки, альтернативные заголовки или слоганы, используйте элементы header или div.

Как и в случае с другими устаревшими элементами, браузеры продолжат поддерживать hgroup на том же уровне, что и прежде. То есть, браузеры, поддерживающие стили пользователя и парсинг этого элемента, будут и дальше поддерживать hgroup, следовательно разработчикам, которые использовали его на страницах сайтов, не придётся его удалять. Де факто этот элемент не имеет синтаксического значения, так как его семантика не поддерживается. По сути это всего лишь div со странным названием.

Зачем и для чего

В последние несколько лет много говорили и писали о том соответствует ли элемент hgroup тем требованиям, которые предъявляют к элементам являющимся частью спецификации HTML. В конечном счёте было решено, что не соответствует. Должно ли мы были принять решение об этом раньше? Да, но как недавно заявил Майк Смит:

Мнения людей расходятся. Мнения организаций расходятся. Наша общая задача, состоит в том чтобы в результате совместных усилий преодолеть разногласия. Эта задача требует времени, часто разочаровывает и почти никогда не бывает лёгкой.

Если вы хотели бы почитать об истории hgroup, в интернете есть много материала:

Frontender Magazine