HTML5嵌套部分和标题标签 [英] HTML5 nested sections and heading tags

问题描述

我将部分标签嵌套在另一部分标签下。

I have section tags nested underneath another section tag. Is it okay to have start the headings from 1 again?

例如：

For example:

<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>

感谢，
马克

推荐答案

是的，它是有效的。

然而， HTML5 鼓励 使用

[...]该部分嵌套级别的适当级别的标题。

[…] headings of the appropriate rank for the section's nesting level.

没有要求，所以你可以自由选择。在任何地方使用 h1 都可以移动路段，而无需调整标题行列（虽然即使列车在移动后混乱也不会失效），对于深层次结构即，超过6个级别）;使用适当的排名可能有助于（老）用户代理没有实现算法。

But it’s not a requirement, so you are free to choose. Using h1 everywhere allows for moving sections without having to adjust the heading ranks (although it would never be invalid, even if the ranks are messed up after moving) and for deep hierarchies (i.e., more than 6 levels); using the appropriate ranks might help (older) user-agents that don’t have the algorithm implemented.

另请注意，他们鼓励

Also note that they encourage to

[...]显式包装切片内容元素中的部分，而不是依靠隐藏部分生成多个标题

[…] explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.

遵循这个建议，并随处使用 h1 你的例子是：

Following this advice and using h1 everywhere, your example would be:

<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>

遵循这两条建议，它会是：

Following both pieces of advice, it would be:

<!-- 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>

这篇关于HTML5嵌套部分和标题标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！