HTML5嵌套节和标题标签

时间:2014-07-27 22:12:17

标签: html html5 semantics semantic-markup

我将section标签嵌套在另一个section标签下面。是否可以从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>

谢谢, 标记

2 个答案:

答案 0 :(得分:14)

是的,这是有效的。

但是,HTML5 encourages要使用

  

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

但这不是必需的,所以你可以自由选择。在任何地方使用h1都可以在不必调整标题排名的情况下移动部分(尽管在移动之后,即使排名混乱也不会无效)和深层次结构(即more than 6 levels);使用适当的排名可能会帮助(较旧的)没有实现算法的用户代理。


另请注意,他们鼓励

  

[...]明确地将部分包含在切片内容的元素中,而不是依赖于通过在切片内容的一个元素中具有多个标题而生成的隐式部分。

遵循此建议并在任何地方使用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>

答案 1 :(得分:1)

工作正常,无论风格是否合理,取决于您如何定义sectionh1-h6代码。

请注意:旧版浏览器如IE 7&amp; 8不喜欢section标记,并会忽略您应用的一些样式。我更喜欢使用div标记,因为它们不依赖于拥有支持HTML5标记的浏览器的用户。