h1 - h6 标题

HTML 标题标签 <h1> 到 <h6> 用于定义内容的层级结构，从最高级别的主标题到最低级别的子标题。正确使用标题层级不仅有助于页面排版，更是搜索引擎优化和无障碍访问的基础。

前置知识

阅读本节前，建议先了解：基本页面结构

基础概念

HTML 提供了六级标题标签，分别对应文档中不同层级的内容结构。<h1> 代表最高级别的标题，通常作为页面的主标题；<h6> 代表最低级别的标题。浏览器会为各级标题应用不同的默认字号和粗细，但标题的语义意义远比视觉效果重要。

标题是构建文档大纲（Document Outline）的核心元素。屏幕阅读器和搜索引擎通过标题层级来理解页面内容的组织结构。因此，正确使用标题是创建语义化 HTML 文档的关键。

语法

标题标签的语法非常简单，将文本包裹在 <h1> 到 <h6> 标签中即可：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>标题层级示例</title>
</head>
<body>
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>
</body>
</html>

各级标题详解

标题的默认样式

不同级别标题在浏览器中的默认渲染效果如下：

标签	默认字号（Chrome）	默认粗细	默认行高	上下外边距
`<h1>`	2em (32px)	bold	1.2	0.67em 0
`<h2>`	1.5em (24px)	bold	1.2	0.83em 0
`<h3>`	1.17em (~18.7px)	bold	1.2	1em 0
`<h4>`	1em (16px)	bold	1.2	1.33em 0
`<h5>`	0.83em (~13.3px)	bold	1.2	1.67em 0
`<h6>`	0.67em (~10.7px)	bold	1.2	2.33em 0

关于默认样式

上述默认样式仅为浏览器的默认行为。实际项目中几乎都会通过 CSS 重置（Reset）或自定义样式来覆盖这些值。标题的语义由标签级别决定，而非视觉大小——即使通过 CSS 将 <h3> 设置得比 <h1> 更大，它在文档大纲中的层级仍然是三级。

h1 — 页面主标题

<h1> 是页面中最重要的标题，代表整个页面的核心主题。通常每个 HTML 页面应该只有一个 <h1>。

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HTML5 学习指南</title>
</head>
<body>
  <!-- 整个页面只有一个 h1 作为主标题 -->
  <h1>HTML5 学习指南</h1>

  <p>欢迎来到 HTML5 完整教程，从零开始学习网页开发。</p>
</body>
</html>

h2 — 主要章节标题

<h2> 用于划分页面中的主要章节，是 <h1> 下一级的内容分区。

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>课程大纲</title>
</head>
<body>
  <h1>前端开发课程</h1>

  <h2>HTML 基础</h2>
  <p>学习 HTML 的基本语法和常用标签。</p>

  <h2>CSS 样式</h2>
  <p>掌握 CSS 布局和动画技术。</p>

  <h2>JavaScript 编程</h2>
  <p>了解 JavaScript 语言和 DOM 操作。</p>
</body>
</html>

h3 — 小节标题

<h3> 用于 <h2> 章节下的小节划分，表示更细粒度的内容组织。

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HTML 标签分类</title>
</head>
<body>
  <h1>HTML 标签大全</h1>

  <h2>文本类标签</h2>
    <h3>标题标签</h3>
    <p>h1 到 h6 用于定义标题层级。</p>
    <h3>段落标签</h3>
    <p>p 标签用于包裹段落文本。</p>

  <h2>媒体类标签</h2>
    <h3>图片标签</h3>
    <p>img 标签用于嵌入图片。</p>
</body>
</html>

h4 - h6 — 更深层级

<h4> 到 <h6> 用于内容层级非常深的情况。在实际开发中，这三级的标题使用频率较低，通常出现在技术文档、长篇教程或结构复杂的页面中。

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>深层级标题示例</title>
</head>
<body>
  <h1>公司年度报告</h1>
    <h2>财务概况</h2>
      <h3>收入分析</h3>
        <h4>国内市场</h4>
          <h5>华东地区</h5>
            <h6>上海分公司</h6>
            <p>上海分公司实现营收 500 万元。</p>
            <h6>杭州分公司</h6>
            <p>杭州分公司实现营收 300 万元。</p>
</body>
</html>

文档大纲与标题层级

什么是文档大纲

文档大纲（Document Outline）是指 HTML 文档的标题层级结构。浏览器、搜索引擎和辅助技术通过解析标题标签来生成文档大纲，帮助用户快速理解页面的内容结构。

一个结构良好的文档大纲类似以下形式：

1. h1：页面主标题
  1.1 h2：第一章
    1.1.1 h3：第一节
    1.1.2 h3：第二节
  1.2 h2：第二章
    1.2.1 h3：第一节
      1.2.1.1 h4：子节

每页一个 h1 原则

每个页面应该只使用一个 <h1>。<h1> 代表页面的核心主题，多个 <h1> 会导致文档大纲混乱，影响 SEO 和无障碍访问。

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文章页面</title>
</head>
<body>
  <!-- 正确：整个页面只有一个 h1 -->
  <h1>如何学习 HTML5</h1>
  <p>本文介绍学习 HTML5 的最佳路径。</p>

  <h2>学习资源</h2>
  <p>推荐以下学习资源。</p>

  <h2>实践项目</h2>
  <p>通过实际项目巩固所学知识。</p>
</body>
</html>

html

<!-- 错误！一个页面使用了多个 h1 -->
<body>
  <h1>如何学习 HTML5</h1>
  <h1>CSS 入门指南</h1>
  <h1>JavaScript 基础</h1>
</body>

常见错误

许多开发者误以为 <h1> 只是用来设置大号文字的样式。如果需要大号文字但不代表页面主标题，应使用 <div> 或 <span> 配合 CSS 来实现，而非滥用 <h1>。

不跳级使用标题

标题应该按照逻辑层级顺序使用，不要跳级。例如，<h1> 后面不应该直接跟 <h3>，而应该经过 <h2>。

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>正确使用标题层级</title>
</head>
<body>
  <!-- 正确：标题按顺序递减，层级清晰 -->
  <h1>产品文档</h1>

  <h2>快速开始</h2>
    <h3>安装指南</h3>
    <p>安装步骤说明。</p>
    <h3>配置说明</h3>
    <p>基本配置方法。</p>

  <h2>API 参考</h2>
    <h3>接口列表</h3>
    <p>所有可用接口的详细说明。</p>
</body>
</html>

html

<!-- 错误！跳过了 h2，直接从 h1 到 h3 -->
<body>
  <h1>产品文档</h1>
  <h3>安装指南</h3>  <!-- 跳过了 h2 -->
  <h3>配置说明</h3>
</body>

不要为了视觉效果而选择标题级别

标题的语义级别应该由内容在文档结构中的层级决定，而非视觉上想要的字号大小。

html

<!-- 不推荐：为了视觉效果选择了不合适的标题级别 -->
<body>
  <h1>页面标题</h1>
  <h4>章节标题</h4>  <!-- 为了让标题小一些而使用了 h4 -->
</body>

html

<!-- 正确：使用语义正确的标题，通过 CSS 控制视觉大小 -->
<body>
  <h1>页面标题</h1>
  <h2>章节标题</h2>
</body>

css

/* 通过 CSS 调整标题的视觉效果 */
h2 {
  font-size: 1.2rem;
  font-weight: normal;
  color: #666;
}

标题中可以包含的元素

标题标签内可以包含行内元素，如 <em>、<strong>、<small>、<a> 等，但不能包含块级元素。

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>标题内容示例</title>
</head>
<body>
  <!-- 标题中可以包含行内元素 -->
  <h1>学习 <em>HTML5</em> 完全指南</h1>

  <h2><strong>重要：</strong>代码规范说明</h2>

  <h3><a href="/docs/api">API 接口文档</a></h3>

  <h4>版本更新日志 <small>v2.0</small></h4>

  <!-- 错误！标题中不能包含块级元素 -->
  <!-- <h1>标题 <div>嵌套块级元素</div></h1> -->
</body>
</html>

实战示例

博客文章页面结构

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>深入理解 HTML 语义化</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      line-height: 1.6;
      color: #333;
    }
  </style>
</head>
<body>
  <!-- h1：整篇文章的主标题 -->
  <h1>深入理解 HTML 语义化</h1>
  <p>发布于 2025-01-15 | 作者：张三</p>

  <!-- h2：文章的主要章节 -->
  <h2>什么是语义化</h2>
  <p>语义化是指使用恰当的 HTML 标签来表达内容的含义和结构，而非仅仅关注视觉效果。</p>

  <h2>为什么语义化很重要</h2>

  <!-- h3：章节下的小节 -->
  <h3>对搜索引擎友好</h3>
  <p>搜索引擎通过标题层级来理解页面的主题和结构，正确的标题层级有助于提升搜索排名。</p>

  <h3>提升无障碍访问</h3>
  <p>屏幕阅读器用户可以快速跳转到各级标题，准确了解页面的内容结构。</p>

  <h3>代码可读性</h3>
  <p>语义化的 HTML 代码更易读、易维护，团队成员可以快速理解文档的结构。</p>

  <h2>如何实践语义化</h2>
  <h3>使用正确的标题层级</h3>
  <p>按照内容的逻辑结构使用 h1 到 h6，不要跳级。</p>

  <h3>选择语义化的标签</h3>
  <p>使用 header、nav、main、article、section 等语义化标签代替无语义的 div。</p>
</body>
</html>

技术文档页面结构

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>安装与配置指南</title>
</head>
<body>
  <h1>安装与配置指南</h1>
  <p>本文档详细介绍系统的安装步骤和配置方法。</p>

  <h2>系统要求</h2>
  <p>在开始安装之前，请确认您的系统满足以下要求。</p>

  <h3>硬件要求</h3>
  <ul>
    <li>处理器：双核 2GHz 及以上</li>
    <li>内存：4GB 及以上</li>
    <li>硬盘空间：至少 10GB 可用空间</li>
  </ul>

  <h3>软件要求</h3>
  <ul>
    <li>操作系统：Windows 10+、macOS 10.15+ 或 Ubuntu 20.04+</li>
    <li>Node.js：16.x 或更高版本</li>
  </ul>

  <h2>安装步骤</h2>
  <h3>下载安装包</h3>
  <p>从官方网站下载最新版本的安装包。</p>

  <h3>运行安装程序</h3>
  <p>双击安装包，按照向导完成安装。</p>

  <h3>验证安装</h3>
  <p>打开终端，输入以下命令验证安装是否成功。</p>

  <h2>常见问题</h2>
  <h3>安装失败怎么办</h3>
  <p>请检查系统日志，确认端口是否被占用。</p>
</body>
</html>

注意事项

标题层级与 SEO

搜索引擎将标题作为理解页面内容的重要信号。以下是一些 SEO 相关的注意事项：

原则	说明
唯一的 h1	每页只有一个 h1，精准表达页面主题
关键词前置	在标题的前部放置重要关键词
层级清晰	h1 -> h2 -> h3 顺序递进，不跳级
避免过长	标题文字简洁明了，建议不超过 60 个字符
避免堆砌	不要在标题中重复堆砌关键词

响应式设计中的标题

在移动端，可能需要调整标题的字号以适应小屏幕：

css

/* 桌面端标题样式 */
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }

/* 移动端适配 */
@media (max-width: 768px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.1rem; }
}

最佳实践

每页一个 <h1>：<h1> 代表页面的核心主题，始终保持唯一
按顺序使用标题：不要跳级，保持层级逻辑清晰
语义决定级别：根据内容在文档结构中的位置选择标题级别，而非视觉大小
标题文字简洁：标题应能概括下方内容的主题
善用 CSS 控制样式：标题的视觉样式应通过 CSS 实现，而非依赖标签的默认样式
避免空标题：标题标签内必须有文本内容
使用辅助工具检查：借助 HTML 验证工具和浏览器扩展检查标题结构

继续学习：p 段落

h1 - h6 标题 ​

基础概念 ​

语法 ​

各级标题详解 ​

标题的默认样式 ​

h1 — 页面主标题 ​

h2 — 主要章节标题 ​

h3 — 小节标题 ​

h4 - h6 — 更深层级 ​

文档大纲与标题层级 ​

什么是文档大纲 ​

每页一个 h1 原则 ​

不跳级使用标题 ​

不要为了视觉效果而选择标题级别 ​

标题中可以包含的元素 ​

实战示例 ​

博客文章页面结构 ​

技术文档页面结构 ​

注意事项 ​

标题层级与 SEO ​

响应式设计中的标题 ​

最佳实践 ​

参考链接 ​

h1 - h6 标题

基础概念

语法

各级标题详解

标题的默认样式

h1 — 页面主标题

h2 — 主要章节标题

h3 — 小节标题

h4 - h6 — 更深层级

文档大纲与标题层级

什么是文档大纲

每页一个 h1 原则

不跳级使用标题

不要为了视觉效果而选择标题级别

标题中可以包含的元素

实战示例

博客文章页面结构

技术文档页面结构

注意事项

标题层级与 SEO

响应式设计中的标题

最佳实践

参考链接