<h1>–<h6>：HTML 的节标题元素

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

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

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

建议每个页面只使用一个<h1>，并且嵌套标题时不要跳过级别。

使用屏幕阅读软件的用户常用的一种导航技巧是快速跳转到各个标题，以确定页面的内容。因此，不要跳过一个或多个标题级别非常重要。这样做可能会造成混淆，因为以这种方式导航的人可能会想知道缺少的标题在哪里。

不要这样做

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

建议这样做

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

嵌套

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

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

当标题嵌套时，在关闭子部分时可以“跳过”标题级别。

• 标题 • 页面结构 • 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

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

可以使用aria-labelledby和id属性的组合来标记分节内容，标签简洁地描述了该部分的目的。此技术适用于同一页面上有多个分节元素的情况。

分节内容示例

<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元素的内容以确定其用途。

• 使用 aria-labelledby 属性
• 标记区域 • 页面结构 • W3C WAI Web 可访问性教程

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

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

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

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

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