HTML 标题¶

标题元素 h1 到 h6 用于表达文档主题和章节层级。标题结构应由内容关系决定，而不是由浏览器默认字号决定。

学习目标¶

使用标题建立清楚、连续的内容层级。
区分页面标题 title 与正文标题元素。
理解标题对导航、搜索和可访问性的作用。

核心概念¶

一篇页面通常有一个描述主要主题的 h1，下级章节使用 h2，章节中的子主题使用 h3：

<main>
  <h1>前端性能指南</h1>
  <section>
    <h2>图片优化</h2>
    <h3>选择文件格式</h3>
    <p>根据内容和浏览器支持选择合适格式。</p>
  </section>
  <section>
    <h2>缓存策略</h2>
    <p>为版本化静态资源设置合理缓存。</p>
  </section>
</main>

标题让读者快速扫描，也让读屏用户通过标题列表跳转。通常不要从 h2 无理由跳到 h4；如果结构确实需要更深层级，应先确认中间章节是否缺失。

标题与外观¶

不要为了获得较小字体而选择较低级别。保留正确级别，再使用 CSS 控制视觉大小：

h2 {
  font-size: 1.5rem;
  line-height: 1.3;
}

同理，不要用加粗段落模拟标题，因为它不会出现在浏览器或辅助技术的标题导航中。

`title` 不是 `h1`¶

title 位于 head 中，常显示在浏览器标签页、书签和搜索结果中；h1 位于 body，是页面可见的主标题。二者可以相近，但用途不同：

<title>图片优化入门 | 前端手册</title>
<h1>图片优化入门</h1>

安全与可用性¶

标题应准确描述后续内容，避免用图标或图片完全替代文字。若标题包含外部数据，仍需按文本上下文安全输出。不要为了搜索排名堆叠关键词或隐藏标题，这会损害真实用户体验。

常见错误¶

根据字号选择 h1 到 h6，造成层级混乱。
每个视觉卡片都机械使用 h1，忽略整个页面主题。
使用空标题或只含无明确名称的图标。
用多个 <br> 在标题内部制造布局间距。
把 title 元素写在 body 中。