3

我对使用h1-h6标题和sectionhtml5 感到困惑。这两个例子哪个是正确的？

<body>
  <article>
    <header>
      <h1>Article heading</h1>
      <p><time>0/0/00</time></p>
      <div id="article-tags"></div>
    </header>
    <section>
      <h2>Introduction</h2>
      <p> ... text ... </p>
    </section>
    <section>
      <h2>The problem itself</h2>
      <p> ... text ... </p>
    </section>
  </article>
</body>

这对我来说似乎很自然，将文章分成几个部分并根据整篇文章的标题层次给它们标题，但是

<body>
  <article>
    <header>
      <h1>Article heading</h1>
      <p><time>0/0/00</time></p>
      <div id="article-tags"></div>
    </header>
    <section>
      <h1>Introduction</h1>
      <p> ... text ... </p>
    </section>
    <section>
      <h1>The problem itself</h1>
      <p> ... text ... </p>
    </section>
  </article>
</body>

我已经看到这使用了很多时间，并且读到每个部分都应该有自己的标题层次结构。

如果第二个例子是正确的，那么标题 from h2to的目的是什么h6？如果每个h2都可以在 new 中分开，section并且应该有自己的标题层次结构h1，那么是否应该使用低于以下的标题h1（因为它们都可以有自己的标题部分）？

4

2 回答 2

6

HTML 5 规范说：

节可以包含任何级别的标题，但强烈建议作者要么仅使用 h1 元素，要么使用适当级别的元素作为节的嵌套级别。

还鼓励作者在分节内容的元素中显式包装节，而不是依赖在分节内容的一个元素中具有多个标题所生成的隐式节。

http://www.w3.org/TR/2011/WD-html5-author-20110809/headings-and-sections.html#headings-and-sections

所以我认为你的两个例子都很好：

  • 在您的第一个示例中，每个标题<section>都有一个<h2>标签，这是适当的，因为每个部分都嵌套在文章的第二层。
  • 在您的第二个示例中，每个都<section>使用一个<h1>标签，因为该<section>标签正在分割 content。

在这两种情况下，您都已将文章部分显式包装在<section>标签中。

我认为<h2>-<h6>保留向后兼容性和灵活性。<h2>使用-允许 HTML4 样式的分段<h6>意味着不必更改现有的 HTML4 内容以适应 HTML5 的分段规则。这也意味着，如果出于某种原因，在给定的情况下使用旧式切片更为最佳，那么作者可以。

HTML 旨在供全球通用使用。一点灵活性确实对此有所帮助。

于 2012-12-25T12:05:03.567 回答
1

根据 Paul D. Waite 评论与规范链接，

两个版本都是正确的，第二个例子只有在你经常移动你的部分时更容易维护，所以你不需要编辑标题。

于 2012-12-25T12:01:59.367 回答