HTML5嵌套的章节和标题标签

Question

我有一些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>

谢谢，马克

- markwilliamsweb

---

“Is it okay?” 有许多方面的考虑；从 HTML 合法性的角度来看是可以的。但如果你向 SEO 专业人士请教的话，他们可能会建议页面上不要有超过一个 h1 元素。” - peterp

这不准确，@peterp。过去只能在页面上有一个H1的日子已经一去不复返了。相反，如果您有一个全新的内容部分需要拥有自己的H1，则可以毫不犹豫地使用它。OP，这个概念涉及到语义，正如peterp所说，它是为了SEO，还包括屏幕阅读器和功能较弱的Web浏览器等其他情况。如果您的页面上第一个带有H1的“部分”可以被删除，并且第二个带有H1的“部分”可以适当地取代它，那么这就是使用第二个H1的好例子。 - dudewad

@dudewad 询问 HTML 代码的“好坏”本身就有点不准确，这是我想指出的。这也是为什么这是一条评论而不是答案的原因；-) - peterp

是的，我理解了。只是想澄清一下，那个答案有点过时了，因为新的建议是你实际上可以使用多个H1，只要它们在语义上合理 :) - dudewad

Answer 1

是的，它是有效的。

然而，HTML5 鼓励 使用对应嵌套级别的标题等级。

[...] 对于使用相应级别的标题有利于深层次嵌套（即超过6个级别）;

但这并不是必须的，所以你可以自由选择。在所有地方使用

标记可以允许移动各个部分而无需调整标题等级（即使移动后等级会出现问题，也不会变得无效），并且可以用于深层次嵌套的情况; 合适的等级可能有助于（老的）用户代理程序，因为它们没有实现算法。

---

还要注意他们鼓励

[...] 明确地将部分内容放置在元素中以创建区域内容，而不是依赖于具有多个标题的元素生成的隐式部分内容。

按照这个建议，并在所有地方使用

标记，您的示例将如下所示：

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

- unor

---

太好了，那真的帮了我很多，非常感谢你Unor。 - markwilliamsweb

它是有效和可以接受的，但不利于可访问性。 - Jake Wilson

@JakeWilson 这对无障碍性有何不利之处？使用适当的标题元素与部分相结合比到处使用 h1 对于无障碍性更好。 - chipit24

Answer 2

这很好，无论如何，样式是否有效取决于您如何定义您的section和h1-h6标签。

请注意：旧版浏览器如IE 7和8不喜欢section标签，并且会忽略您对其应用的某些样式。我更喜欢使用div标签，因为它们不依赖于用户拥有支持HTML5标签的浏览器。

- Khaltazar

---

谢谢Khaltazar。是的，我不倾向于直接为部分设置样式。我使用类来实现这一点。我只是想知道标题层次结构是否有效。 - markwilliamsweb

我只是想评论一下，div其实不是一个好主意，因为它们并不代表一种特定的内容；它们是通用的。语义化的代码应该是目标。谷歌的HTML5 shiv可以用来解决旧版本IE中的样式问题。 - Micah Henning