HTML 标题 h1~h6 标签

Begindev 编辑部 March 25, 2026

就像一本书利用章节标题来组织内容一样，网页使用 HTML 标题来定义内容的层级和重要性。

有效的结构对两件事非常重要：

可读性：帮助用户快速浏览和理解主要话题。
SEO 与无障碍性：帮助搜索引擎（如 Google）和屏幕阅读器（盲人使用的工具）理解你的网页结构。

1. 理解 HTML 标题标签

HTML 提供了 6 个等级的标题，从 <h1> 到 <h6>。

<h1>：最重要、最高等级的标题
<h6>：最不重要、最低等级的标题。

这些标签属于块级元素（block-level elements），这意味着它们通常会从新的一行开始，并且占据整行的宽度。

1.1 标题的语义重要性

你需要记住的最重要的一点是：标题代表的是结构，而不是字体大小。

虽然浏览器默认会把 <h1> 显示得很大很粗，把 <h6> 显示得很小，但你不应该为了“让字变大”而使用标题标签（那是 CSS 的工作）。你应该为了建立逻辑结构而使用它们。

<h1>：代表整个页面或主要内容区域的主标题。

比喻：书名或报纸的头条新闻。
规则：通常一个页面应该只有 1 个 <h1>，用来明确页面的主题。

<h2>：代表内容中的主要章节。

比喻：书的章节名。

<h3>：用于 <h2> 章节内部的子章节。
<h4>, <h5>, <h6>：用于更深层的内容细分。虽然通常不太常用，但在复杂的文档结构中必不可少。

注意： 浏览器会给这些标题标签应用默认样式（例如，<h1> 文本最大且加粗，<h6> 文本最小且加粗），但这种视觉外观可以（且经常）被 CSS（层叠样式表）覆盖。无论视觉上怎么变，标题的语义价值保持不变。在选择标题级别时，永远要优先考虑内容的逻辑结构，而不是默认的视觉样式。

2. 为什么要遵守标题层级？

按逻辑顺序使用标题（h1 -> h2 -> h3）非常重要，原因如下：

2.1 可读性和用户体验

用户通常不会逐字阅读网页，而是通过扫描标题来寻找感兴趣的内容。良好的层级结构能让他们快速定位。

现实案例：在一个电商产品页上，产品名称是 <h1>。“产品描述”、“规格参数”、“用户评价”是 <h2>。而在“规格参数”下的“尺寸”、“重量”则是 <h3>。

2.2 无障碍性（Accessibility）

使用屏幕阅读器的视障用户高度依赖标题结构来导航。他们可以从一个标题跳到下一个标题。如果标题结构混乱（例如从 h1 直接跳到 h4），用户会感到困惑，甚至无法浏览页面。

2.3 搜索引擎优化（SEO）

搜索引擎会分析标题标签来理解你的网页在讲什么。正确使用标题可以提升你的页面在相关搜索结果中的排名。

假设场景： 考虑一个在线食谱网站。如果“奶油培根意面”的食谱使用 <h1> 作为主标题，<h2> 用于“配料”和“步骤”，<h3> 用于“准备时间”和“烹饪时间”，搜索引擎就能轻松识别食谱的主题及其关键组成部分。这使得该页面更有可能出现在“奶油培根意面配料”或“如何烹饪奶油培根意面”的搜索结果中。

3. HTML 标题应用最佳实践

在写代码时，请遵守以下“黄金法则”：

每个页面只有一个 <h1>：这有助于搜索引擎和工具确定页面的核心主题。
遵循逻辑顺序：不要跳级。

正确：<h1> -> <h2> -> <h3>
错误：<h1> -> <h3>（跳过了 <h2>，这会让结构断层）

标题应描述内容：标题文字应该准确概括下面段落的内容，避免模糊不清。
不要为了样式使用标题：如果你只是想要粗体或大号字，请使用 CSS 或 <strong> 标签。千万不要仅仅为了让字变小而使用 <h6>。

4. 实践示例与演示

让我们看一些例子，说明如何有效使用标题以及应避免的常见陷阱。

4.1 案例 1：带有标题的基础文档结构

这是你如何使用各种标题级别构建简单博客文章的方法，基于我们在第一章学到的 HTML 基础结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的博客文章</title>
</head>
<body>
    <h1>探索 Web 开发的奇迹</h1>

    <h2>HTML 简介</h2>
    <p>HTML 是每个网页的骨架。</p>

    <h3>什么是元素？</h3>
    <p>元素是 HTML 的构建块。</p>

    <h3>属性详解</h3>
    <p>属性提供关于元素的额外信息。</p>

    <h2>开始使用 CSS</h2>
    <p>CSS 用于设置网页的外观样式。</p>

    <h3>CSS 基础语法</h3>
    <p>CSS 规则由选择器和声明块组成。</p>

    <h2>JavaScript 基础</h2>
    <p>JavaScript 增加了交互性。</p>

    <h4>变量和数据类型</h4>
    <p>了解如何声明变量是基础。</p>

    <h3>结论</h3>
    <p>掌握这三者，你就能创建强大的网站。</p>
</body>
</html>

在这个例子中：

<h1> 用于博客文章的总标题。
<h2> 标签用于主要部分，如“HTML 简介”、“开始使用 CSS”和“JavaScript 基础”。
<h3> 标签用于 <h2> 部分内的子小节，例如“什么是元素？”。
<h4> 用于“JavaScript 基础”这个 <h2> 内部的更深一层细节。这种结构逻辑清晰，易于跟随。

4.2 案例 2：常见错误——错误地使用标题

下面是一个不该如何使用标题标签的例子，展示了常见错误：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构糟糕的页面</title>
</head>
<body>
    <h1>一个小通知</h1>
    <p>这是一条小信息。</p>

    <h3>重要公告！</h3>
    <p>我们要向大家分享一个重要公告。</p>

    <h6>这只是我想加粗的一些文字。</h6>
    <p>它作为标题没有任何语义意义。</p>

    <h1>第一部分主标题</h1>
    <p>第一部分的内容。</p>

    <h1>第二部分主标题</h1>
    <p>第二部分的内容。</p>
</body>
</html>

在这个错误的例子中：

第一个 <h1> “一个小通知”不是全页的主标题；它只是一条小信息。
它从 <h1> 跳到了 <h3>，跳过了 <h2>，破坏了逻辑层级。
<h6> 仅仅是被用来让文字变粗变小，而不是作为结构性子标题。
有多个 <h1> 标签，这会让搜索引擎和屏幕阅读器对页面的主要话题感到困惑。

这种结构创造了混乱且难以访问的体验。永远记住：为了语义价值使用标题，而不仅仅是为了默认的视觉样式。

5. 总结

标题不仅仅是大号的粗体字，它们是构建结构良好、无障碍且对搜索引擎友好的网页的基础。

记住黄金法则：

每个页面 1 个 <h1>。
层级连续（h1 > h2 > h3）。
语义优先（为了结构而用，不是为了样式）。