<h1>–<h6>：HTML 区域标题元素

尝试一下

<h1>Beetles</h1>
<h2>External morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>

h1,
h2,
h3,
h4 {
  margin: 0.1rem 0;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
  padding-left: 20px;
}

h3 {
  font-size: 1.2rem;
  padding-left: 40px;
}

h4 {
  font-size: 1rem;
  font-style: italic;
  padding-left: 60px;
}

属性

该元素包含所有全局特性。

使用要点

• 用户代理可以使用标题信息，例如自动构建文档的目录。
• 不要为了减小标题的字体而使用低级别的标题，而是使用 CSS font-size 属性。
• 避免跳过某级标题：始终要从 <h1> 开始，接下来依次使用 <h2> 等等。

示例

所有标题

下面的代码展示了所有可用的标题级别。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</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>

下面是代码的运行结果：

无障碍问题

导航

对于使用屏幕阅读软件的用户而言，一种常见的导航方式是从一个标题跳到另一个标题，以快速确定页面的内容。因此，不要跳过一个或多个标题级别。因为这样做可能会造成混乱，使用户困惑于缺少的标题在哪里。

错误用法

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

   1. h2 Etymology

   2. h2 Distribution and Diversity

   3. h2 Evolution

      1. h3 Late Paleozoic
      2. h3 Jurassic
      3. h3 Cretaceous
      4. h3 Cenozoic

   4. h2 External Morphology

      1. h3 Head

         1. h4 Mouthparts

      2. h3 Thorax

         1. h4 Prothorax
         2. h4 Pterothorax

      3. h3 Legs

      4. h3 Wings

      5. h3 Abdomen

当小节中嵌套子标题时，若关闭了某个小节，则其中的嵌套的子标题可能会被“跳过”。

• Headings • Page Structure • WAI Web Accessibility Tutorials
• MDN Understanding WCAG, Guideline 1.3 explanations
• Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
• MDN Understanding WCAG, Guideline 2.4 explanations
• Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0
• Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0
• Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0

标注章节内容

屏幕阅读软件用户的另一种常用导航技术是生成内容分区的列表，并使用其确定页面布局

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.

示例

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

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.

• Using the aria-labelledby attribute
• Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials

规范

浏览器兼容性

html.elements.h1

html.elements.h2

html.elements.h3

html.elements.h4

html.elements.h5

html.elements.h6

参见

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