Есть ли цель для заголовков 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 (потому что все они могут иметь свой собственный раздел с заголовком)?

Источник

2 ответа

Решение

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

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

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

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

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

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

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

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

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

Источник

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

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

Источник
Другие вопросы по тегам