将 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 检查您使用的标题是否正确。