Вложенные разделы HTML5 и теги заголовков

У меня есть теги секций, вложенные под другим тегом раздела. Можно ли снова начать заголовки с 1?

Например:

<section>
   <h1>Page Title</h1>
   <section>
      <h1>Section Title</h1>
      <h2>Section Sub Title</h2>
      <p>Sub section text</p>
   </section>
   <section>
      <h1>Section Title</h1>
      <h2>Section Sub Title</h2>
      <p>Sub section text</p>
   </section>
</section>

Спасибо, Марк

Ответ 1

Да, его действительный.

Однако HTML5 рекомендует использовать

[...] заголовки соответствующего ранга для уровня вложенности раздела.

Но это не требование, поэтому вы можете выбирать. Использование h1 везде позволяет перемещать разделы без необходимости корректировать ранги заголовков (хотя это никогда не будет недопустимым, даже если ранги перепутаны после перемещения) и для глубоких иерархий (т.е. более 6 уровней); использование соответствующих рангов может помочь (более старым) пользовательским агентам, которые не имеют реализованного алгоритма.

Также обратите внимание, что они поощряют

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

Следуя этому совету и используя h1 везде, ваш пример будет выглядеть следующим образом:

<section>
   <h1>Page Title</h1>
   <section>
      <h1>Section Title</h1>
      <section>
        <h1>Section Sub Title</h1>
        <p>Sub section text</p>
      </section>
   </section>
   <section>
      <h1>Section Title</h1>
      <section>
        <h1>Section Sub Title</h1>
        <p>Sub section text</p>
      </section>
   </section>
</section>

Следуя обеим советам, это будет:

<!-- assuming that this section is a child of the body element -->
<section>
   <h2>Page Title</h2>
   <section>
      <h3>Section Title</h3>
      <section>
        <h4>Section Sub Title</h4>
        <p>Sub section text</p>
      </section>
   </section>
   <section>
      <h3>Section Title</h3>
      <section>
        <h4>Section Sub Title</h4>
        <p>Sub section text</p>
      </section>
   </section>
</section>

Ответ 2

Это хорошо работает, независимо от того, работает ли он по стилю, зависит от того, как вы определяете теги section и h1-h6.

Просто отметим: старые браузеры, такие как IE 7 и 8, не любят тег section и будут игнорировать некоторые стили, к которым вы применимы. Мне нравится использовать теги div больше, поскольку они не полагаются на пользователя, имеющего браузер, поддерживающий теги HTML5.