HTML5嵌套节和标题标签

Question

我有部分标签嵌套在另一个部分标签下面.是否可以从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>

谢谢,马克

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

Answer 2

这很好用，无论它的风格是否有效取决于你如何定义你的section和h1-h6标签。

只是要注意：像 IE 7 和 8 这样的旧浏览器不喜欢section标签，并且会忽略您应用到它的一些样式。我更喜欢使用div标签，因为它们不依赖于用户拥有支持 HTML5 标签的浏览器。