【问题标题】:Is there any purpose for h2-h6 headings in HTML5?HTML5 中的 h2-h6 标题有什么用途吗?
【发布时间】:2026-02-04 20:25:01
【问题描述】:

我对在 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>

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

如果第二个例子是正确的,标题从h2h6 的目的是什么?如果每个h2 可以在新的section 中分离,并且应该有自己的标题层次结构,再次以h1 开头,是否应该使用比h1 更低的标题(因为它们都可以有自己的标题部分) ?

【问题讨论】:

  • 第一个例子,只使用一次&lt;h1&gt;
  • @Mr.Alien:not in HTML5.

标签: html html-heading


【解决方案1】:

HTML 5 规范说:

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

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

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

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

  • 在您的第一个示例中,每个 &lt;section&gt; 都有一个 &lt;h2&gt; 标记作为其标题,这是适当的,因为每个部分都嵌套在文章的第二层。
  • 在您的第二个示例中,每个&lt;section&gt; 使用一个&lt;h1&gt; 标记,这是适当的,因为&lt;section&gt; 标记是sectioning content

在这两种情况下,您都已将文章部分明确包装在 &lt;section&gt; 标记中。

我认为&lt;h2&gt;-&lt;h6&gt; 是为了向后兼容和灵活性而保留的。允许使用&lt;h2&gt;-&lt;h6&gt; 进行 HTML4 样式的分节意味着不必更改现有的 HTML4 内容以适应 HTML5 的分节规则。这也意味着,如果出于某种原因,在给定的情况下使用旧式切片更为理想,那么作者可以。

HTML 旨在供全球通用用途。一点灵活性确实有助于做到这一点。

【讨论】:

  • 谢谢你的回答,我想我得重新学习 HTML
  • @PranavKapoor:不完全是,只是the bits that have changed
  • 是的,但我最好了解这些变化并更新自己。我已经在上面添加了书签link :)
  • @PaulD.Waite - 几点。首先,请注意您引用的文本有一个open bug,因为人们担心 HTML5 大纲算法未在浏览器中实现。我不确定,但我认为这意味着在使用 all &lt;h1&gt;s 模式时,可能会错误地将标题级别报告给平台可访问性 API。
  • 第二,&lt;section&gt;sectioning content 元素,而不是sectioning root 元素。
【解决方案2】:

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

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

【讨论】: