写了十年前端，你可能仍然不会正确使用

HTML5 之前的规范建议一个页面只用一个 <h1>，代表整个页面的主题。HTML5 引入 section、article 等语义化标签后，规范一度允许在不同的 sectioning 内容中各自使用一个 <h1>，理论上讲得通——但实际情况是，几乎所有主流浏览器和屏幕阅读器都没有完整实现这套”大纲算法”，对它们来说，页面里出现多个 <h1>，听到的仍然是”好几个最重要的标题”，反而造成混乱。

所以稳妥的做法依然是：一个页面，一个 <h1>，把它当成这个页面的唯一”标题牌”。

2. 把 Logo 包在 `<h1>` 里

这是特别常见的一个坑，尤其容易出现在首页。很多人觉得 Logo 视觉上最显眼、位置最靠上，那就该是 <h1>。

但这里要分清楚：Logo 代表的是”这是哪个网站”，而 <h1> 代表的是”这个页面讲的是什么”。首页当然可以例外地把网站名/口号当作页面主题；但如果是内页，比如一篇文章详情页，Logo 依然放在 <h1> 里，屏幕阅读器用户打开每一篇文章，听到的第一句话都是网站名字，而不是文章标题，这对他们来说毫无意义。

正确的做法是：Logo 一般用 <a> 包裹跳转首页即可，不必强行套上标题标签；每个页面真正的 <h1>，应该反映这个页面自己的主题。

3. 标题层级从 `<h1>` 直接跳到 `<h3>`、`<h4>`

这个错误的根源，往往是”我想要更小的默认字号，所以我直接用更小的标题标签”。

标题标签的层级（h1 到 h6）本质上是在描述内容的大纲结构，类似 Word 里的”标题1、标题2、标题3″，它应该是逐级递减、不能跳级的。如果只是想要视觉上小一点的字号，正确姿势永远是”标签按结构走，样式用 CSS 调”，而不是靠跳级标签去凑视觉效果。

4. 用 `display: none` 隐藏 `<h1>`，纯粹为了给搜索引擎看

早些年确实有一批站长这么干：页面上不想显示标题，又想让搜索引擎抓到关键词，于是塞一个 <h1> 然后隐藏掉。

这种做法现在的搜索引擎基本都能识别出来，属于典型的”堆砌关键词”作弊手法，非但没有好处,还可能被判定为作弊内容，影响权重。如果确实有视觉上不需要展示、但语义上需要保留给屏幕阅读器的标题，应该用视觉隐藏但对屏幕阅读器可见的方式处理，而不是简单粗暴的 display: none（那样连屏幕阅读器也读不到了）。

那 `<h1>` 到底该怎么用

把上面的坑反过来看，其实就是正确答案：

一个页面一个 <h1>，把它当作这个页面在跟用户和机器介绍”我是谁”。
它的内容要能概括页面主题，首页可以是网站名/定位，文章页就该是文章标题，产品页就该是产品名。
标题层级按内容结构走，h1 下面套 h2，h2 下面套 h3，不要因为想要某个字号就随意跳级，字号问题交给 CSS。
不要为了 SEO 塞标题又藏起来，标题该出现在它该出现的地方，该多大交给样式，不要投机取巧。

为什么这件小事值得较真

可能有人会说，用户根本看不出 <h1> 用没用对，样式一样，有什么关系。

区别在于两类”看不见标签”的使用者：一类是搜索引擎的爬虫，一类是靠屏幕阅读器逐行”听”网页的视障用户。对他们来说，<h1> 不是装饰，而是导航的路标——爬虫靠它理解页面主题、判断内容质量；屏幕阅读器用户往往会先把所有标题过一遍，来判断这个页面值不值得细看，标题用错了，等于给这两类”读者”指错了路。

写了十年前端，样式效果我们早就驾轻就熟，但语义化这件事，恰恰是最容易被样式效果”糊弄过去”、也最容易被长期忽略的部分。下次写 <h1> 之前，不妨多问自己一句：我现在写的这句话，真的是这个页面的主题吗？