1. Web
  2. HTML
  3. 参考
  4. 元素
  5. <h1>

<h1>–<h6>: HTML 章节标题元素

从 <h1> 到 <h6> 的 HTML 元素表示六个级别的章节标题。<h1> 是最高级别的章节，而 <h6> 是最低级别的章节。默认情况下，所有标题元素都会在布局中创建一个块级盒子，从新行开始并占据其包含块中所有可用宽度。

试一试

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

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

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

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

为 <h1> 指定统一的字体大小

在 2025 年 5 月之前，HTML 标准规定 <section>、<article>、<aside> 或 <nav> 元素中的 <h1> 元素应呈现为 <h2>（较小的font-size和调整后的margin-block），如果再嵌套一层，则呈现为 <h3>，依此类推。这种特殊的、依赖上下文的默认样式现已移除。

为确保对实现旧的、依赖上下文的默认样式的浏览器进行一致的 <h1> 渲染，请使用以下样式规则

css
h1 {
  margin-block: 0.67em;
  font-size: 2em;
}

或者，为了避免覆盖其他针对 <h1> 的样式规则，您可以使用:where()，它的特异性为零

css
:where(h1) {
  margin-block: 0.67em;
  font-size: 2em;
}

无障碍

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

不要这样做

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

推荐这种方式

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

嵌套

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

给定以下页面结构

html
<h1>Beetles</h1>

<h2>Etymology</h2>

<h2>Distribution and Diversity</h2>

<h2>Evolution</h2>
<h3>Late Paleozoic</h3>
<h3>Jurassic</h3>
<h3>Cretaceous</h3>
<h3>Cenozoic</h3>

<h2>External Morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>
<h3>Legs</h3>
<h3>Wings</h3>
<h3>Abdomen</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 腹部

当标题嵌套时，关闭子节时可能会“跳过”标题级别。

标记章节内容

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

章节内容可以使用 aria-labelledby 和 id 属性的组合进行标记，其中标签简洁地描述了章节的用途。这种技术在同一页面上有多个分区元素的情况下非常有用。

分区内容示例

html
<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 元素的内容来确定它们的用途。

示例

所有标题

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

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

示例页面

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

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

技术摘要

内容类别 流内容、标题内容、可感知内容。
允许内容 短语内容.
标签省略 无，起始标签和结束标签都必须存在。
允许父级 任何接受流内容的元素。
隐式 ARIA 角色 heading
允许的 ARIA 角色 tab、presentation 或 none
DOM 接口 HTMLHeadingElement

规范

规范
HTML
# the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

浏览器兼容性

html.elements.h1

html.elements.h2

html.elements.h3

html.elements.h4

html.elements.h5

html.elements.h6

另见

帮助改进 MDN

了解如何贡献

本页面最后由 MDN 贡献者 在 修改。

在 GitHub 上查看此页面 • 报告此内容的问题