在做前端这些年，我发现一个很有意思的现象：真正把h元素表吃透的人，其实不多。大部分人写页面，<h1> ~ <h6> 凭感觉乱上，能出字就行，至于结构、语义、SEO、可访问性，全都丢在脑后。结果是：页面看着“差不多”，但在搜索引擎和读屏软件眼里，却像一堆混乱的文本碎片。

我后来是怎么重新学会尊重标题层级的？说起来有点像重装三观的过程。

一、先把话说死：不用h元素表，页面就没有骨骼

很多人觉得，<h1> 不就是“标题大一点”嘛，<h2> 就是“稍微小一点的标题”。这种想法，说严重点，是把结构化内容当成纯样式了。

在我眼里，一份合理的h元素表就是页面的“骨骼图”：

• **<h1>** 是整页的门牌号，只能有一个（绝大多数场景下我都坚持这一点）
• **<h2>** 是一层楼的标题，各大版块的分区
• **<h3>** 则是房间号，用来细分 h2 下面的内容
• 继续往下 **<h4> ~ <h6>**，更多是长文档或复杂文档的精细结构

你可以把整个页面想象成一本书：

• 书名：h1
• 章节名：h2
• 小节名：h3
• 更细的小标题：h4 及以下

当h元素表被认真设计出来，页面立刻从“堆文字”变成“有层次、有路线”的内容地图。读者可以扫几眼标题就大致知道自己在哪一层，搜索引擎也能更准确地判断“这篇内容到底在讲什么”。

二、搜索引擎到底在看什么：h元素表是免费的导航牌

我不太喜欢那种“为了 SEO 而 SEO”的做法，但要承认一点：标题层级确实是搜索引擎理解页面主题的关键信号之一。

我自己的做法大概是这样：

1. 在 **<h1>** 里自然地出现核心关键词，比如这篇文章就会把“h元素表”放进去，但绝不会生硬堆砌
2. **<h2>** 里扩展关键词和相关概念，比如“SEO布局”“语义结构”“可访问性”等，把文章的“范围”画出来
3. **<h3>** 开始，则更多讲具体应用场景、代码示例、经验教训，让搜索引擎看到：这不是一篇空洞的介绍，而是有细节、有实践的内容

简单说，合理的h元素表让搜索引擎更轻松地：

• 抓到页面的中心思想
• 分辨哪些段落是重点
• 评估内容的覆盖深度和结构清晰度

我有过一个挺明显的案例：同一篇文章，只是把原来乱七八糟的 h2 / h3 重新梳理了一遍，标题里调整了关键词的位置和层级，别的内容基本没动。一个月后，看日志，长尾词的曝光量明显上去了，几段小标题甚至独立拿到了不错的排名。

你说这是不是“玄学”？一开始我也怀疑，但当你多几次类似的实验，心里就有数了——h元素表不是什么装饰，而是真参与了“你在互联网上长什么样”。

三、代码层面的“干净”，往往从 h 开始

我越来越觉得，能不能好好用h元素表，是衡量一个前端是否在乎“整体感”的小指标。

看一段代码就知道：

“`html

我的技术博客

前端实践

h元素表 的合理用法

这里写的是关于标题层级、SEO、语义化的具体经验…

组件设计的小心得

这部分聊的是我踩过的坑和更好的拆分方式…

工具与效率

我常用的调试技巧

比如如何用好 DevTools、如何快速定位性能瓶颈…

“`

这样的结构，一眼就能看出作者脑子是清楚的：

• h1 只负责整站或整页的总标题
• 每个 section 有自己的 h2
• 下面是一个个 h3，自然地下沉，没有突然跳到 h4 或莫名其妙地多几个 h1

我见过最离谱的，是一页里出现五六个 h1，有的还包在广告组件里，只是因为“默认样式好看”。这种做法不仅对 SEO 不友好，对读屏软件用户更是灾难——他们会被“这也是主标题，那也是主标题”搞到心累。

如果你真心想把前端写得更有质感，把h元素表整理好，是最容易见效的一步。

四、样式归样式，语义归语义：别拿 h 当万能放大镜

我以前也干过这种事：

• 想让字变大一点？用 h3。
• 想加粗一点？直接 h2 套上去。

直到有一天，我把页面用读屏软件听了一遍，才意识到自己之前有多鲁莽。屏幕阅读器会把 h 标签当作结构线索来报读，不是当作“字变大了”的提醒。

所以我现在特别坚持一个原则：

• 字体大小、颜色、粗细，全都用 CSS 解决
• h1 ~ h6 只表达“这里是标题，而且有层级关系”

要让普通段落看起来像标题？

“`html

这只是视觉上的标题

“`

css
.fake-heading {
font-size: 20px;
font-weight: bold;
margin: 1.5em 0 0.5em;
}

而真正属于h元素表的标题，我会格外谨慎：写之前先想一眼——它是不是这一块内容的“名字”？如果不是，我就忍一忍，不给它乱加 h。

五、从读者视角重新审视：标题其实是“邀请”

有一阵子，我会刻意把自己的页面打印出来，用红笔圈标题。那种体验很微妙——当你不再盯着代码，而是像读一本薄册子一样翻看，就会发现：

• 有的 h2 太抽象，看了跟没看一样
• 有的 h3 冗长、堆词，看上去像在堆 SEO 关键词
• 有几个地方干脆没有标题，一整坨文字压下来，让人想直接关页

那时我意识到：

h元素表不只是给机器看的，它其实是在一句一句地对读者说——“嘿，这里讲的是什么，你要不要进来看一眼？”

于是我开始在标题里用更口语化、更有画面感的表达。比如不会写“h元素表的基本概念”，而是写成：

“如果没有 h 元素表，你的页面就像失忆的小说”

当然，代码里不会写得这么夸张，但我至少会保证：

• 每个 h2 都回答一个清晰的问题
• 每个 h3 都是对 h2 的具体展开，而不是跳到另一个星球

这种“认真为标题起名”的习惯，反过来提升了内容质量，因为你会被迫思考：这一段，到底在讲什么？值得一个标题吗？

六、可访问性：那些你没看到的人，也在靠h元素表找路

很多开发者没亲眼见过读屏软件是怎么“读网页”的，于是天然低估了h元素表的重要性。

我第一次看，是在一次内部分享会上，一个视障同事现场演示：

• 按快捷键跳转到下一个标题
• 在标题列表中快速浏览整页内容结构
• 根据 h1 ~ h3 的层级决定“我要不要展开听这一部分”

那一刻我挺震撼的——对我们来说只是顺手加的 h2，对他来说就是“这个页面值不值得浪费时间”的依据。

如果标题层级一团乱麻，他就会在一堆毫无逻辑的“标题”里来回跳，像在一个灯坏了一半、标识混乱的商场里找路。你可以想象那种挫败感。

所以，当我重新去看一份h元素表的时候，脑子里多了一个问题：

如果我是通过耳朵而不是眼睛在浏览这页内容，这样的标题顺序，我能不能坚持听完？

这个念头，会非常自然地把你拉向更负责任的写法。

七、实战建议：怎样养成“看一眼就想优化 h 元素”的职业病

如果你想真正把h元素表练到肌肉记忆，我给几个我自己在用的小习惯：

• 写页面前，先在纸上列出 h1、h2、h3 的草稿，就像列大纲，不求完美，但先有骨架
• 写完之后，用浏览器插件或简单脚本，生成当前页面的“标题树”，看顺序有没有跳级、冗余或莫名其妙的地方
• 偶尔用读屏软件或“仅标题模式”浏览自己的页面，体验一下结构是否自然
• 复盘一篇访问量好的文章，专门只看标题和h元素表：它们为什么有效？节奏、用词、层级安排有没有什么值得抄的

慢慢的，你会发现一种微妙的变化：

当别人发来一个链接，你还没看具体内容，只扫一眼标题层级，就大致能判断——这篇是随手堆出来的，还是有人认真打磨过。

而你自己写的页面，会在不知不觉中变得更“立体”：

• 搜索引擎更容易理解
• 读屏软件更友好
• 普通读者也更愿意往下滑

这些都不是玄学，只是从h元素表这样一个看似微不足道的入口，去尊重一件事：内容本身。

最后，如果你哪天打开自己做的站点，忍不住开始逐个检查 h1 到 h6，甚至看到别人乱用标题就手痒，这说明——你已经把这套“标题洁癖”练成了本能。而这，在我看来，是一个前端慢慢走向成熟的很有意思的小标志。