HTML标题标签h1到h6的核心规范是：一个页面仅一个h1且须准确表达核心主题，h2至h6必须严格逐级嵌套、禁止跳级，不可用作样式替代，95%页面无需h5/h6；结构合法性、语义清晰度与层级连续性才是SEO和可访问性的关键。
HTML 中没有“标题权重值”这种固定数字，搜索引擎不按 h1/h2 的数字大小打分。 所谓“h1 权重 100、h2 权重 80”是常见误解，Google 多次明确否认存在内置权重表。真正影响 SEO 和可访问性的，是结构是否合法、语义是否清晰、层级是否连续。
h1 必须唯一且位置靠前
一个页面出现两个 h1，不是“权重平分”，而是让算法放弃判断主干。CMS 模板里 header 区域硬写 <h1>MySite</h1>，正文又来一个 <h1>React 性能优化指南</h1>，等于给爬虫扔了两把钥匙——它不知道开哪扇门。
真实场景中要这样处理：
- Layout 层去掉所有
h1，改用<header role="banner"></header>或纯<div class="logo"></div> - 页面组件负责输出唯一
h1，并通过 SSR/SSG 在首帧 HTML 中就写死，别等 JS 注入 - Next.js 用户必须用
generateMetadata同步更新title和h1文本，否则 AI 摘要工具会判定“意图模糊”
h2–h6 必须严格逐级嵌套，不能跳级
跳级不是“浏览器不报错就没事”，而是语义断裂。例如 h2 后直接写 h4，意味着“这个 h4 属于某个没写的 h3 下”，读屏软件可能直接跳过它，或导航菜单里出现空层级。
立即学习“前端免费学习笔记（深入）”；
检查方法：
- 命令行快速扫描：
curl -s URL | grep -o '<h[1-6]'，看是否连续、有无缺失 - Chrome DevTools 的 Accessibility 面板会标红警告
Heading levels should only increase by one - Screaming Frog 报
heading-level-skipped错误，就是检测到跳级
允许的结构：h1 → h2 → h3 → h4；h2 → h3 → h3（同级并列没问题）；禁止：h1 → h4、h3 出现在 h2 之前、h2 出现在 h1 缺失的页面中。
别用标题标签当样式开关
把 h6 设成 24px 加粗当主标题、把 h3 设成小字号当备注、用 h2 替代 <strong>——这些操作视觉上可行，但语义已错乱。屏幕阅读器仍会读作“标题三级”，用户听到一堆无上下文的“标题”，完全无法理解结构。
你需要一个小号加粗文字？用 <span class="small-bold"></span>；需要强调一段话？用 <strong>；需要标题结构？老老实实按层级用 h1–h6。
真实限制：95% 的页面用不到 h5 和 h6。真要极细颗粒度（比如法律条款分项），优先考虑 <dl> 或带语义 class 的 <p>，而非硬塞 h6。
最常被忽略的点：动态渲染时，h1 的 DOM 更新必须与路由同步，不能只靠 useEffect(() => { document.title = ... })。Lighthouse 会报 document-title 和 heading-order 错误，因为服务端初始 HTML 里没写，JS 注入后结构才补全——这对 SEO 和首屏语义解析是致命的。
