Ответ 1

HTML5 решает это с помощью тега hgroup. Используйте это.

Если вы чувствуете, что еще не готовы мигрировать, я бы сказал, что вы все равно должны идти с соответствующими заголовками заголовков всякий раз, когда вы отмечаете заголовок. Если вы чувствуете дискомфорт, отмечая два заголовка в качестве братьев и сестер, возможно, вы можете настроить свою копию, чтобы уменьшить количество заголовков до одного.

Изменить:

Со времени написания будущее hgroup находится под угрозой: http://dev.w3.org/html5/status/issue-status.html#ISSUE-164

Изменить 2:

По состоянию на 2 апреля 2013 года hgroup удаляется из спецификации: http://lists.w3.org/Archives/Public/public-html-admin/2013Apr/0003.html

(Источник: https://twitter.com/iandevlin/status/318961224836587521)

Ответ 2

Определение

Пожалуйста, поправьте меня, если я получу термин подзаголовок неправильный (я, вероятно, сделал)

Я считаю, что ваш контент более похож на какой-либо заголовок (хотя в свободном смысле этого слова - http://en.wikipedia.org/wiki/Byline). Поэтому вам будет оправдан (и рекомендуется) использовать отдельный стиль и разметку, не имеющие иерархической семантики.

Spec

• https://www.w3.org/TR/html51/common-idioms-without-dedicated-elements.html#subheadings-subtitles-alternative-titles-and-taglines

Элементы

h1-h6 не должны использоваться для разметки подзаголовков, субтитров, альтернативные названия и теги, если они не предназначены для заголовка новый раздел или подраздел.

Заголовок должен помочь составить схему документа. Контур документа в Microsoft Word &mdash, который также использует заголовки 1-6, является хорошим примером этой концепции в действии. Заголовки часто служат (или имеют возможность служить) в качестве названия для некоторого дополнительного объема информации, то есть "заголовки для разделов, с которыми они связаны".

Если содержимое не помогает составить контур документа и не может быть заголовком для другой информации, то он, вероятно, не принадлежит тегу H[1-6].

Пример

Заголовок обычно содержит группу вводных или навигационных средств. _{http://www.w3.org/TR/html51/sections.html#the-header-element, акцент мой.}

<header>
    <h1>About</h1>
    <div class="byline">We sell apples, yay!</div>
</header>

<style>
    header .byline { color: blue; }
</style>

Старые примеры

_{Все еще действует, но я предпочитаю элемент header как логический контейнер для заголовка и его bylines/taglines/etc.}

<h2>About</h2> 
<div>We sell apples, yay!</div>

<style>

H2 + DIV { /* byline style - IE7+ selector */ }

</style>

ИЛИ

<h2>About</h2>
<div class="byline">We sell apples, yay!</div>

<style>

.byline { /* byline style */ }

</style>

Ответ 3

Мне очень понравилось предложение Тоби Инкстера здесь: http://lists.w3.org/Archives/Public/public-html/2010Nov/0405.html в качестве альтернативы предложенному HTML5 элементу <hgroup>, который кажется сложной концепцией для многих веб-авторов. (См. Начало этой темы Брюса Лоусона.) Тоби предлагает:

<h2>
  <span>About<span>
  <small>We sell apples, yay!</small>
</h2>

Ответ 4

Для передачи уровней заголовков вы должны использовать разные теги <Hx>:

<h2>About</h2><h3>We sell apples, yay!</h3>

Это их причина существования - для разных уровней заголовка.

Что касается стиля - почему, по вашему мнению, определение класса sub-heading лучше, чем переопределение стилей элементов H?

Ответ 5

Я лично считаю, что ваш второй вариант - лучший. "О" - это название раздела, но "подзаголовок" или более описательный характер, чем заголовок/заголовок раздела. Вы можете использовать <strong> вместо диапазона, чтобы указать его немного более важную, чем остальная часть текста, но не заголовок.

Если они действительно подзаголовки, например

О

О нас

Текст о нас

Об этом сайте

Текст об этом сайте

Вы должны использовать <h3> для подзаголовков.

Ответ 6

В случае, когда строка является цитатой, вы должны использовать blockquote.

<h2>About Us</h2>
<blockquote class="byline"><p>We Sell Apples Yay!</p></blockquote>