HTML中如何正确运用h1到h6标题标签

一个页面只能有一个h1且必须准确表达核心主题，h2～h6须严格逐级嵌套；多h1稀释权重、误导读屏软件，跳级或语义错用（如标题当样式）破坏SEO与可访问性。

一个页面只能有一个 h1，且必须准确表达整页核心主题；h2～h6 必须严格按内容逻辑逐级嵌套，跳级、重复或仅作样式使用都会直接破坏 SEO 和屏幕阅读器体验。

为什么一个页面只能有一个 h1

搜索引擎和屏幕阅读器把 h1 当作页面“主干”信号。出现两个 h1（比如页眉 Logo 和正文标题同时用 h1），等于告诉机器：“这两段话同等重要”，结果是主标题权重被稀释，盲人用户无法快速定位核心内容。

• 常见错误：CMS 模板在 header 里硬编码 <h1>MySite</h1>，又在文章组件里再写一个 <h1>React 性能优化指南</h1>
• 正确做法：Layout 文件里去掉 h1，改用 <header role="banner"> 或纯 <div class="logo">；页面组件负责输出唯一 h1，并通过数据注入（如 Next.js 的 generateMetadata、Vue 的 useSeoMeta）确保服务端已渲染
• SPA 路由切换时，别只靠 useEffect(() => { document.title = ... })，得同步更新 DOM 中的 h1 文本，否则 Lighthouse 会报 document-title 和 heading-order 错误

h2 到 h6 必须逐级嵌套，不能跳级

跳级不是“浏览器不报错就没事”，而是语义断裂。例如 h2 后直接写 h4，意味着“这个 h4 属于某个没写的 h3 下”，读屏软件可能直接跳过它，或导航菜单里出现空层级。

• 允许的结构：h1 → h2 → h3 → h4
• 禁止的结构：h1 → h2 → h4（缺 h3）；h3 出现在 h2 之前；h2 出现在 h1 缺失的页面中
• 检查方法：用命令行快速扫描 curl -s URL | grep -o '<h[1-6]' | sort -u，看是否连续、有无缺失；Chrome DevTools 的 Accessibility 面板会标红警告 Heading levels should only increase by one
• h5 和 h6 实际极少需要——95% 的页面用不到。真要极细颗粒度（比如法律条款分项），优先考虑 <dl> 或带语义 class 的 <p>，而非硬塞 h6

别用标题标签当样式开关

把 h3 设成小字号当备注、把 h6 加粗当强调、用 h2 替代 strong —— 这些操作视觉上可行，但语义已错乱。屏幕阅读器仍会读作“标题三级”，用户听到一堆无上下文的“标题”，完全无法理解结构。

立即学习“前端免费学习笔记（深入）”；

• 需要小号加粗文字？用 <span class="caption"> + CSS
• 需要强调一句话？用 <strong> 或 <em>
• 需要视觉上像 h2 但语义是普通段落？用 <p class="section-title">，别降级标签
• 所有标题默认带 margin，想统一清空？在 CSS 初始化里写 h1, h2, h3, h4, h5, h6 { margin: 0; }，而不是换标签来“凑效果”

最常被忽略的点是：标题层级不是写完就能跑通的，它必须和 title 标签语义一致，且在 SSR/静态生成阶段就正确输出。动态改 document.title 或靠 JS 注入 h1，对旧爬虫和部分读屏工具来说，等于没有。