<h1>–<h6>: The HTML Section Heading elements

¥Attributes

这些元素仅包括 全局属性。

¥These elements only include the global attributes.

¥Usage notes

• 用户代理可以使用标题信息自动构建文档的目录。
• 不要使用标题元素来调整文本大小。请改用 CSS font-size 属性。
• 不要跳过标题级别：始终从 <h1> 开始，然后是 <h2>，依此类推。

¥Avoid using multiple <h1> elements on one page

虽然 HTML 标准允许在一个页面上使用多个 <h1> 元素（只要它们不是 nested），但这并不被认为是最佳实践。页面通常应该有一个描述页面内容的 <h1> 元素（类似于文档的 <title> element）。

¥While using multiple <h1> elements on one page is allowed by the HTML standard (as long as they are not nested), this is not considered a best practice. A page should generally have a single <h1> element that describes the content of the page (similar to the document's <title> element).

注意：在旧版本的 HTML 标准中，允许在嵌套的 切片元素 中嵌套多个 <h1> 元素。然而，这从未被认为是最佳实践，现在也不符合要求。阅读 没有文档大纲算法 中的更多内容。

¥Note: Nesting multiple <h1> elements in nested sectioning elements was allowed in older versions of the HTML standard. However, this was never considered a best practice and is now non-conforming. Read more in There Is No Document Outline Algorithm.

最好每页仅使用一个 <h1> 和 嵌套标题，而不跳过级别。

¥Prefer using only one <h1> per page and nest headings without skipping levels.

¥Accessibility

¥Navigation

屏幕阅读软件用户的常见导航技术是快速从一个标题跳转到另一个标题以确定页面的内容。因此，不要跳过一个或多个标题级别，这一点很重要。这样做可能会造成混乱，因为以这种方式导航的人可能会想知道丢失的标题在哪里。

¥A common navigation technique for users of screen reading software is to quickly jump from heading to heading in order to determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.

不要这样做：

¥Don't do this:

<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>

更喜欢这个：

¥Prefer this:

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>

嵌套

¥Nesting

标题可以嵌套为小节，以反映页面内容的组织。大多数屏幕阅读器还可以生成页面上所有标题的有序列表，这可以帮助人们快速确定内容的层次结构：

¥Headings may be nested as subsections to reflect the organization of the content of the page. Most screen readers can also generate an ordered list of all the headings on a page, which can help a person quickly determine the hierarchy of the content:

1. h1 甲虫
   1. h2 词源
   2. h2 分布和多样性
   3. h2 进化
      1. h3 晚古生代
      2. h3 侏罗纪
      3. h3 白垩纪
      4. h3 新生代
   4. h2 外部形态
      1. h3 头
         1. h4 口器
      2. h3 胸部
         1. h4 前胸
         2. h4 翼胸
      3. h3 腿
      4. h3 翅膀
      5. h3 腹部

当标题嵌套时，关闭小节时标题级别可能为 "skipped"。

¥When headings are nested, heading levels may be "skipped" when closing a subsection.

• 标题 • 页面结构 • WAI Web 辅助功能教程
• MDN 理解 WCAG，指南 1.3 解释
• 了解成功标准 1.3.1 | W3C 了解 WCAG 2.0
• MDN 了解 WCAG，指南 2.4 解释
• 了解成功标准 2.4.1 | W3C 了解 WCAG 2.0
• 了解成功标准 2.4.6 | W3C 了解 WCAG 2.0
• 了解成功标准 2.4.10 | W3C 了解 WCAG 2.0

¥Labeling section content

屏幕阅读软件用户的另一种常见导航技术是生成 分段内容 列表并用它来确定页面的布局。

¥Another common navigation technique for users of screen reading software is to generate a list of sectioning content and use it to determine the page's layout.

可以使用 aria-labelledby 和 id 属性的组合来标记分段内容，标签简洁地描述了该分段的用途。这一技术对于同一页面上有多个分区元素的情况非常有用。

¥Sectioning content can be labeled using a combination of the aria-labelledby and id attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.

分段内容示例

¥Sectioning content examples

<header>
  <nav aria-labelledby="primary-navigation">
    <h2 id="primary-navigation">Primary navigation</h2>
    <!-- navigation items -->
  </nav>
</header>

<!-- page content -->

<footer>
  <nav aria-labelledby="footer-navigation">
    <h2 id="footer-navigation">Footer navigation</h2>
    <!-- navigation items -->
  </nav>
</footer>

在此示例中，屏幕阅读技术将宣布有两个 <nav> 部分，一个称为 "主要导航"，一个称为 "页脚导航"。如果未提供标签，则使用屏幕阅读软件的人员可能必须调查每个 nav 元素的内容以确定其用途。

¥In this example, screen reading technology would announce that there are two <nav> sections, one called "Primary navigation" and one called "Footer navigation". If labels were not provided, the person using screen reading software may have to investigate each nav element's contents to determine their purpose.

• 使用 aria-labelledby 属性
• 标记区域 • 页面结构 • W3C WAI Web 辅助功能教程

¥Examples

¥All headings

以下代码显示了正在使用的所有标题级别。

¥The following code shows all the heading levels, in use.

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

¥Example page

以下代码显示了一些标题及其下的一些内容。

¥The following code shows a few headings with some content under them.

<h1>Heading elements</h1>
<h2>Summary</h2>
<p>Some text here…</p>

<h2>Examples</h2>
<h3>Example 1</h3>
<p>Some text here…</p>

<h3>Example 2</h3>
<p>Some text here…</p>

<h2>See also</h2>
<p>Some text here…</p>

¥Technical summary

¥See also

• <p>
• <div>
• <section>