Question

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

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

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

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

Answer 1

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>标记为sectioning content。

在这两种情况下，您都明确将文章部分包装在<section>标记中。

我认为<h2> - <h6>可以保持向后兼容性和灵活性。允许使用<h2> - <h6>进行HTML4样式的切片意味着不必更改现有的HTML4内容以适应HTML5的切片规则。这也意味着，无论出于何种原因，如果在特定情况下使用旧式切片更为理想，那么作者就可以。

HTML旨在用于全球通用目的。有点灵活性确实有助于此。

Answer 2

根据Paul D. Waite对link to specification的评论，

两个版本都是正确的，如果您经常移动部分，第二个示例更容易维护，因此您无需编辑标题。

HTML5中的h2-h6标题有什么用途吗？

2 个答案: