让 h1-h6 像目录一样工作——一页就懂的标题标签实战笔记

写网页和写书一样，先搭目录再填正文。h1-h6 就是 HTML 给你的 6 级“目录按钮”。用对了，搜索引擎、屏幕阅读器、用户三方都舒服；用错了，等于把目录页乱撕一通，谁都找不着北。

1. 6 个标签到底代表什么？

• h1＝书名，只能出现一次，一句话交代“这页到底讲啥”。
• h2＝章节，可重复，把内容切成大块。
• h3-h6＝小节、小条、小点，层级依次递减，可缺但别跳。

2. 三条硬规矩

1. 一页只用一个 h1，多了就是“双黄蛋”，Google 也懵 。
2. 按顺序降级，别从 h2 直接蹦到 h4，屏幕阅读器会以为“丢了一页” 。
3. 样式归 CSS，别为了“字大”把 p 硬改成 h3，语义会哭 。

3. 实战小抄

<h1>健康饮食指南</h1>          <!-- 书名 -->
<h2>早餐怎么吃得饱又瘦</h2>   <!-- 章节 -->
  <h3>全麦面包挑选 3 招</h3>   <!-- 小节 -->
  <h3>鸡蛋吃几分熟最营养</h3>
<h2>午餐搭配公式</h2>
  <h3>优质碳水清单</h3>
  <h4>上班族 10 分钟便当</h4> <!-- 小小节 -->

4. SEO 加血包

• h1 里放核心关键词，靠左放，长度 15-35 字最佳 。
• h2/h3 自然融入长尾词，别硬塞。
• 每块标题下的正文≥150 字，别让“目录”下面空壳。

5. 无障碍隐藏技巧

只想给屏幕阅读器“看”的标题，可以这么藏：

.visually-hidden {
  position:absolute;
  width:1px; height:1px;
  margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0);
  border:0;
}

<h1 class="visually-hidden">健康饮食指南</h1>

视觉不占地，朗读器却能一键导航 。

6. 一页总结（可截图）

• 1 h1 → 多 h2 → 顺次 h3-h6
• 关键词靠左，不堆叠
• 跳级=跳崖，连续=安心
• 样式找 CSS，语义找 h1-h6

把这张便利贴贴在显示器边框，以后再写页面，先敲标题再写内容，你会发现结构顺了，SEO 涨了，用户也看得爽。