将 HTML5 元素映射到 HTML 类和 ID，但是标题标签呢？

Question

在工作中，我们开始遵循这个特定的指南来慢慢实现 HTML5 好东西：

http://oli.jp/2008/html5-class-cheatsheet/

使用 HTML5 结构的基本思想，但使用带有类和 ID 的 HTML4 div。我们知道 Javascript 脚本可以生成所需的 HTML5 元素（因此 IE 可以实际设置它们的样式，否则不会！）但是我们强调让我们的所有网站都可以访问，在 IE6+ 上工作并且不需要 Javascript发挥作用。

我们已经开始使用 HTML5 文档类型，因为拥有 'data-' 属性的强大功能对我们很有用。 （ala John Resig 的文章http://ejohn.org/blog/html-5-data-attributes/）

第一篇文章建议的所有内容对我们来说似乎都很好，但一个令人困惑的领域是如何处理标题标签层次结构。对于每个定义的块（无论是文章、旁白、页脚等），我们是否再次从顶部开始标题层次结构？例如，对于一篇文章，h1、h2、h3...。然后页面上的下一篇文章将有 h1、h2、h3... 然后对于页脚（如果有标题）然后它将重新开始 h1、h2、h3... h1，h2，h3...

...如果是这样的话，对于搜索引擎和屏幕阅读器之类的内容，在页面上放置大量 h1、h2、h3 有什么影响？我们正在使用 html5 文档类型，但并没有真正使用新的文章、页脚、导航标签，而是正在考虑使用 HTML5 的标题层次结构方式。

任何人都可以帮助清除这个问题的泥巴吗？

Answer 1

如果您不使用 实际 分段元素，则不应“重置”为 h1。也就是说，以下是合适的：

<h1>Site title</h1>
<div class=article>
  <h2>The most interesting article ever!</h2>
  <div class=section>
    <h3>Foo</h3>
    <p>Bar
  </div>
  <div class=section>
    <h3>Baz</h3>
    <p>Quux
  </div>
</div>

对于实际元素，您可以使用任一

<h1>Site title</h1>
<article>
  <h2>The most interesting article ever!</h2>
  <section>
    <h3>Foo</h3>
    <p>Bar
  </section>
  <section>
    <h3>Baz</h3>
    <p>Quux
  </section>
</article>

或

<h1>Site title</h1>
<article>
  <h1>The most interesting article ever!</h1>
  <section>
    <h1>Foo</h1>
    <p>Bar
  </section>
  <section>
    <h1>Baz</h1>
    <p>Quux
  </section>
</article>

我建议使用HTML5 Outliner 来检查您对标题的使用是否正确。