HTML 标题

学习目标

掌握 HTML 六级标题标签（<h1> 到 <h6>）的语义与用途
理解标题层级对内容结构、可访问性和搜索引擎优化（SEO） 的重要性
避免常见误用（如跳级、滥用标题做样式）
学会通过 CSS 合理自定义标题外观

什么是 HTML 标题

HTML 标题是用于定义网页内容层级结构的语义化标签，从主标题到次级子标题，共六级：

<h1>主标题</h1>
<h2>一级子标题</h2>
<h3>二级子标题</h3>
<h4>三级子标题</h4>
<h5>四级子标题</h5>
<h6>五级子标题</h6>

核心作用：

组织内容：将长文划分为逻辑清晰的区块
提升可读性：用户快速扫描页面结构
增强 SEO：搜索引擎通过标题理解页面主题与层次
支持无障碍：屏幕阅读器依赖标题导航（如“跳转到下一节”）

注意：标签中的 h 必须小写（<H1> 虽能渲染，但不符合规范）。

语义与使用规范

标签	语义	使用建议
`<h1>`	页面主标题	每页仅用一次，代表核心主题（如文章标题、网站首页标语）
`<h2>`	主要章节标题	用于划分大块内容（如“产品介绍”、“技术原理”）
`<h3>`	子章节标题	属于 `<h2>` 下的细分（如“产品功能”、“安装步骤”）
`<h4>`–`<h6>`	更细粒度的子标题	用于复杂文档的深层结构（如法律条款、学术论文）

正确层级示例

推荐

<h1>如何学习 Web 开发</h1>
  <h2>前端基础</h2>
    <h3>HTML 入门</h3>
      <h4>标题与段落</h4>
      <h4>链接与图片</h4>
    <h3>CSS 样式</h3>
  <h2>后端开发</h2>
    <h3>Node.js 简介</h3>

错误示例

应避免

<!-- 跳级：从 h1 直接到 h4 -->
<h1>主标题</h1>
<h4>子内容</h4>

<!-- 多个 h1（除非在独立 article 内） -->
<h1>新闻一</h1>
<h1>新闻二</h1>

例外情况：在 <article> 或 <section> 等独立语义区块中，可各自拥有一个 <h1>。

一级标题应该只用一次

虽然 HTML5 允许多个 <h1>（尤其在组件化布局中），但主流 SEO 实践仍建议每页一个主标题：

搜索引擎偏好：Google 等引擎将 <h1> 视为页面核心关键词载体
用户认知清晰：明确知道“这是本页最重要的主题”
无障碍体验：屏幕阅读器用户常通过“找 h1”快速定位页面主旨

最佳实践：主标题用 <h1>，其余章节用 <h2> 起始。

自定义标题样式

HTML 标题默认有字体大小和粗细，但可通过 CSS 完全控制外观：

内联样式

<h1 style="font-size: 48px; color: #2c3e50; text-align: center;">
  自定义主标题
</h1>

外部或内部 CSS

推荐方式

<style>
  h1 {
    font-family: "Helvetica Neue", sans-serif;
    color: #2980b9;
    margin-bottom: 1rem;
  }
  h2 {
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
  }
</style>

重要原则：不要为了视觉效果而滥用标题标签！
若只需大号文字，应使用 <p class="large-text"> + CSS，而非 <h3>。

标题最佳实践

1. 保持层级连续

遵循 h1 → h2 → h3 → ... 顺序，禁止跳级（如 h1 → h3）。

2. 标题即摘要

每个标题应准确概括其下内容，避免模糊表述：

❌ “更多内容”
✅ “响应式图片的实现方法”

3. 勿用标题做装饰

❌ 错误：<h3>欢迎光临！</h3>（仅为醒目，无结构意义）
✅ 正确：<p class="welcome-text">欢迎光临！</p> + CSS 样式

4. 结合语义化标签

将标题放入 <section>、<article> 等容器中，增强结构语义：

<article>
  <h1>Web 开发入门指南</h1>
  <section>
    <h2>HTML 基础</h2>
    <p>...</p>
  </section>
</article>

5. 考虑无障碍访问

避免空标题（<h2></h2>）
不用标题包含非文本内容（如纯图标），除非提供 aria-label

重点总结

要点	说明
六级标题	`<h1>`（最重要）到 `<h6>`（最次要）
单页一 h1	主标题唯一，利于 SEO 与可访问性
禁止跳级	必须按 `h1→h2→h3…` 顺序嵌套
语义优先	标题用于结构，非样式；用 CSS 控制外观
描述性文本	标题应清晰表达下文内容主旨
无障碍友好	确保屏幕阅读器能正确导航

思考题

在一个包含多个 <article> 的博客首页中，每个文章卡片是否可以有自己的 <h1>？为什么？
如果设计师要求“某个段落看起来像 h2 但不应影响页面结构”，你该如何实现？
如何使用开发者工具快速检查页面的标题层级是否合理？有哪些浏览器扩展可辅助验证？