13. 标题标签 h1-h6

本节目标：学会用 h1-h6 搭建页面标题层级，理解标题对 SEO 和可访问性的意义。

六级标题是什么

HTML 提供了六个级别的标题标签，从 <h1> 到 <h6>。<h1> 最大最重要，<h6> 最小最次要。

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

把它们复制到 .html 文件里，浏览器会显示从大到小的六行文字。

标题不是用来调字号的

很多人刚学时会犯一个错：想要大字就用 <h1>，想要小字就用 <h6>。这完全搞反了。

标题标签表达的是结构层级，不是字体大小。想要多大字号，用 CSS 来控制。

<!-- 错误：为了大字体用 h1 -->
<h1>这段其实只是正文</h1>

<!-- 正确：用 CSS 控制视觉，用标题表达结构 -->
<h2 class="big-text">这是一个重要章节</h2>

层级关系要清晰

想象写一本书的目录：

<h1>HTML 入门教程</h1>
  <h2>第一章：HTML 是什么</h2>
    <h3>1.1 网页的骨架</h3>
    <h3>1.2 浏览器怎么看 HTML</h3>
  <h2>第二章：第一个页面</h2>
    <h3>2.1 创建文件</h3>
    <h3>2.2 运行页面</h3>

这种嵌套关系让页面结构一目了然。搜索引擎和屏幕阅读器都依赖它来理解内容。

不要跳级

写完 <h2> 后不要直接跳到 <h4>。层级要逐级下降，中间不能断开。

一个页面几个 h1

传统建议是：一个页面只放一个 <h1>，用它表示页面最核心的标题。

<h1>码上学 - 前端学习平台</h1>

不过现代 HTML 标准允许在 <article>、<section> 等语义容器内各放一个 <h1>。对新手来说，先记住”一个页面一个 h1”就够了。

标题对 SEO 的影响

搜索引擎通过标题标签判断页面内容的重点。<h1> 里的词权重最高，<h2> 次之。

几个实操要点：

<h1> 包含页面核心关键词
标题里不要堆砌无关词汇
标题要能概括下方内容

<h1>HTML5 入门教程：从零开始学网页开发</h1>

标题对可访问性的意义

视障用户用屏幕阅读器浏览网页时，常用标题来”扫视”页面结构。

一个标题层级混乱的页面，对他们来说就像一篇没有目录、没有章节划分的长文。

检查标题结构

浏览器插件可以生成”标题大纲”，帮你检查层级是否合理。搜索”headingsmap”就能找到。

小结

h1-h6 六个级别，表达标题层级
标题表达结构，不控制外观
不要跳级，逐级嵌套
一个页面一个 h1 是最安全的做法
清晰的标题结构对 SEO 和可访问性都有好处