Есть ли смысл использовать заголовки h2-h6 в HTML5?

Меня смущает использование заголовков h1-h6 и section в html5. Какой из этих двух примеров правильный?

<body>
  <article>
    <header>
      <h1>Article heading</h1>
      <p><time>0/0/00</time></p>
      <div id="article-tags"></div>
    </header>
    <section>
      <h2>Introduction</h2>
      <p> ... text ... </p>
    </section>
    <section>
      <h2>The problem itself</h2>
      <p> ... text ... </p>
    </section>
  </article>
</body>

Это кажется мне естественным, разделить статью на разделы и дать им заголовки в соответствии с иерархией заголовков всей статьи, но

<body>
  <article>
    <header>
      <h1>Article heading</h1>
      <p><time>0/0/00</time></p>
      <div id="article-tags"></div>
    </header>
    <section>
      <h1>Introduction</h1>
      <p> ... text ... </p>
    </section>
    <section>
      <h1>The problem itself</h1>
      <p> ... text ... </p>
    </section>
  </article>
</body>

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

Если второй пример правильный, то для чего нужны заголовки от h2 до h6? Если каждый h2 может быть разделен на новый section и должен иметь свою собственную иерархию заголовков, снова начинающуюся с h1, должны ли когда-либо использоваться более низкие заголовки, чем h1 (потому что все они могут иметь свой собственный раздел с заголовком)?


html html-heading
person Buksy    schedule 25.12.2012    source источник
comment
1-й пример, используйте <h1> только один раз   -  person Mr. Alien    schedule 25.12.2012
comment
@Mr.Alien: не в HTML5.   -  person Paul D. Waite    schedule 25.12.2012

Ответы (2)


arrow_upward
6
arrow_downward

Спецификация HTML 5 гласит:

Разделы могут содержать заголовки любого ранга, но авторам настоятельно рекомендуется либо использовать только элементы h1, либо использовать элементы ранга, соответствующего уровню вложенности раздела.

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

http://www.w3.org/TR/2011/WD-html5-author-20110809/headings-and-sections.html#headings-and-sections

Поэтому я думаю, что оба ваших примера в порядке:

  • В вашем первом примере каждый <section> имеет тег <h2> для своего заголовка, что уместно, поскольку каждый раздел вложен на втором уровне статьи.
  • Во втором примере каждый <section> использует тег <h1>, что уместно, поскольку тег <section> разделение контента.

И в обоих случаях вы явно заключили разделы статьи в тег <section>.

Я думаю, что <h2>-<h6> сохранены для обратной совместимости и гибкости. Разрешение секционирования в стиле HTML4 с помощью <h2>-<h6> означает, что существующий контент HTML4 не нужно изменять, чтобы он соответствовал правилам секционирования HTML5. Это также означает, что если по какой-либо причине в данной ситуации более оптимально использовать секционирование по старому стилю, то авторы могут.

HTML предназначен для общего использования во всем мире. Немного гибкости действительно помогает в этом.

person Paul D. Waite    schedule 25.12.2012
comment
Спасибо за этот ответ, я думаю, мне придется заново изучать HTML - person Pranav 웃; 25.12.2012
comment
@PranavKapoor: не совсем, просто измененные биты. - person Paul D. Waite; 25.12.2012
comment
@PranavKapoor: и ничто не мешает вам продолжать использовать только HTML4. Спецификация HTML5 для пользовательских агентов (т. е. браузеров) требует, чтобы они продолжали поддерживать старые теги. так же, как и всегда, так что вы все еще можете публиковать HTML4, если хотите. - person Paul D. Waite; 25.12.2012
comment
Да, но лучше я сам узнаю об изменениях и обновлю. Я уже добавил в закладки указанную выше ссылку :) - person Pranav 웃; 25.12.2012
comment
@PaulD.Waite - Пара баллов. Во-первых, обратите внимание на открытую ошибку для текста что вы цитируете, потому что есть опасения, что алгоритм структуры HTML5 не реализован в браузерах. Я не уверен, но я думаю, что это означает, что уровень заголовка может быть неправильно передан в API доступности платформы при использовании шаблона all <h1>s. - person Alohci; 25.12.2012
comment
Во-вторых, <section> – это разделение контента элемент, а не корень раздела< /а> элемент. - person Alohci; 25.12.2012
comment
@Alohci: спасибо, я никогда не могу понять корень разделов по сравнению с контентом разделов прямо в своей голове. Интересное замечание об открытом баге. - person Paul D. Waite; 25.12.2012

arrow_upward
1
arrow_downward

Согласно комментарию Пола Д. Уэйта с ссылка на спецификацию,

Обе версии верны, второй пример легче поддерживать, только если вы часто перемещаете разделы, поэтому вам не нужно редактировать заголовки.

person Buksy    schedule 25.12.2012