Семантическая структура в HTML - Субтитры (Pre-HTML5)

Я новичок в HTML и хочу сделать семантически корректный HTML, однако мне трудно работать с тем, что кажется только заголовками, списками и параграфами.

В частности, я не могу найти место, которое имеет смысл для субтитров. Я пишу блог-сайт, поэтому давайте использовать его в качестве примера:

БЛОГ НАЗВАНИЕ
лучший блог в мире

post_title1
post_title2
post_title3

Семантически "БЛОГ НАЗВАНИЕ" - h1. Для меня имеет смысл, что post_titleX - h2, но не подходит для подзаголовка - "лучший блог в мире", который будет классифицироваться на том же уровне, что и они.

Ответ 1

Спецификация сильно изменилась с тех пор, как рабочий проект был обновлен, когда этот ответ был впервые опубликован пять лет назад. Как подчеркивает @Andre Figueiredo в комментариях, опубликованная спецификация HTML5 очень понятна в этом конкретном случае использования ( добавлено выделение):

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

Короче говоря, используйте элемент p, соответствующим образом классифицированный внутри элемента header:

<header>
    <h1>A BLOG TITLE</h1>
    <p class="tagline">the best blog in the world</p>
</header>

<ы > В HTML5 существует очевидное решение:

<header>
    <h1>A BLOG TITLE</h1>
    <h2>the best blog in the world</h2>
</header>

При использовании HTML4 я лично стараюсь заменить h2 на p class="tagline" или что-то подобное.

Изменить: Чтобы мотивировать использование h2 в HTML5, подумайте над названием Dr. Strangelove:

<h1>Dr. Strangelove</h1>
<?>Or: How I Learned to Stop Worrying and Love the Bomb</?>

Имеет ли смысл элемент p здесь? Не совсем - это не абзац, это заглавие. Работает ли h2 как есть? Нет, мы могли бы смутить его субтитрами самого текста. Так что же нам делать? Мы используем h2 и группируем его с помощью h1 с помощью элемента header, тем самым избавляясь от двусмысленности в отношении субтитров в тексте. С >

Ответ 2

Я бы просто использовал элемент абзаца, для меня это не так странно, как использование элемента заголовка:

<p class="subtitle">the best blog in the world</p>

Вы отвечаете ( "ваш ответ", "его ответ"?), безусловно, будет способ пойти, если вы разметки используете HTML5.

Ответ 3

В ближайшее время может появиться элемент SUBLINE или SUBHEAD, который будет наиболее подходящим:

http://www.techrepublic.com/blog/web-designer/html5-hgroup-is-dead-what-you-need-to-know/

До тех пор, пока он не станет доступным, мы останемся с попыткой сделать H2 (или какой-либо другой элемент Hx) или P или Q действовать как подстроки/подзаголовки/субтитры и т.д. Когда станет доступным структура содержание, предложенное в исходном сообщении, будет, я полагаю, следующим: (предположим, что элемент SUBHEAD - это то, чем он заканчивается):

<h1>A BLOG TITLE
<subhead>the best blog in the world</subhead>
</h1>

<h2>post_title1</h2>
<h2>post_title2</h2>
<h2>post_title3</h2>

Хотя я бы предпочел:

<h1>A BLOG TITLE</h1>
<subhead>the best blog in the world</subhead>

<h2>post_title1</h2>
<h2>post_title2</h2>
<h2>post_title3</h2>

Сам факт, что конкретный элемент SUBHEAD следует за конкретным элементом Hx в моем уме, семантически соединял бы эти два элемента вместе, как и H2 (как последующий брат, а не как ребенок или другой такой потомок ) после H1 связывает эти два элемента.

В мире, где подавляющее большинство веб-разработчиков требуют, чтобы каждый отдельный элемент Hx на своей странице был H1, OP здесь заслуживает внимания за то, что он связан с правильной структурой заголовка и даже выходит за рамки этого и признавая, что субтитры не совпадают с заголовками.

Так как я не могу показать отображаемый код здесь, Codepen at http://codepen.io/WebDevCA/pen/wzyIH показывает тест элемента SUBHEAD и показывает, что, на мой взгляд, предпочтительное расположение его в DOM является как непосредственно последующим селектором для сестер, связанным с его элементом Hx, а не как дочерний элемент внутри элемента Hx.

Ответ 4

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

<body>
 <h1>John blog</h1>
 <h2 class="tagline">the best blog in the world</h2>
 <div>…</div>
</body>

Здесь все последующее содержимое (до следующего h1/h2, если оно есть) будет находиться в области tagline вместо фактического названия блога. Это не то, что мы хотим для субтитров.

в HTML5

( UPDATE: элемент hgroup удален из HTML5. См. мой ответ на другой вопрос о как разделить подзаголовки в HTML5 сейчас.)

Для HTML5 для этого варианта использования существует новый элемент: hgroup

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

Используя hgroup, для контура документа учитывается только один из дочерних заголовков.

<body>
 <hgroup>
   <h1>John blog</h1>
   <h2 class="tagline">the best blog in the world</h2>
 </hgroup>
 <div>…</div>
</body>

в HTML 4.01

Было бы два пути

1) Включите субтитры в основной заголовок, возможно, разделенные двоеточием.

<body>
 <h1>John blog: <span class="tagline">the best blog in the world</span></h1>
 <div>…</div>
</body>

2) Используйте p (или если это не абзац, div) для субтитров:

<body>
 <h1>John blog</h1>
 <p class="tagline">the best blog in the world</p>
 <div>…</div>
</body>

(если сразу следующее содержимое будет состоять из абзацев, вы также можете подумать об использовании элемента hr после tagline)

Ответ 5

Я думаю, что решение должно ответить на следующий вопрос: "Что будет иметь смысл для чтения с экрана?"

<h1>A BLOG TITLE</h1>
<p><q>the best blog in the world</q></p>