一个页面只能有一个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"></header>或纯<div class="logo">；页面组件负责输出唯一 <code>h1，并通过数据注入（如 Next.js 的generateMetadata、Vue 的useSeoMeta）确保服务端已渲染 - SPA 路由切换时，别只靠
useEffect(() => { document.title = ... })，得同步更新 DOM 中的h1文本，否则 Lighthouse 会报document-title和heading-order错误 - 允许的结构：
h1→h2→h3→h4 - 禁止的结构：
h1→h2→h4（缺h3）；h3出现在h2之前；h2出现在h1缺失的页面中 - 检查方法：用命令行快速扫描
curl -s URL | grep -o '<h sort>，看是否连续、有无缺失；Chrome DevTools 的 Accessibility 面板会标红警告 <code>Heading levels should only increase by one -
h5和h6实际极少需要——95% 的页面用不到。真要极细颗粒度（比如法律条款分项），优先考虑<dl></dl>或带语义 class 的<p></p>，而非硬塞h6 - 需要小号加粗文字？用
<span class="caption"></span>+ CSS - 需要强调一句话？用
<strong></strong>或<em></em> - 需要视觉上像
h2但语义是普通段落？用<p class="section-title"></p>，别降级标签 - 所有标题默认带 margin，想统一清空？在 CSS 初始化里写
h1, h2, h3, h4, h5, h6 { margin: 0; }，而不是换标签来“凑效果”
h2 到 h6 必须逐级嵌套，不能跳级
跳级不是“浏览器不报错就没事”，而是语义断裂。例如 h2 后直接写 h4，意味着“这个 h4 属于某个没写的 h3 下”，读屏软件可能直接跳过它，或导航菜单里出现空层级。
别用标题标签当样式开关
把 h3 设成小字号当备注、把 h6 加粗当强调、用 h2 替代 strong —— 这些操作视觉上可行，但语义已错乱。屏幕阅读器仍会读作“标题三级”，用户听到一堆无上下文的“标题”，完全无法理解结构。
最常被忽略的点是：标题层级不是写完就能跑通的，它必须和 title 标签语义一致，且在 SSR/静态生成阶段就正确输出。动态改 document.title 或靠 JS 注入 h1，对旧爬虫和部分读屏工具来说，等于没有。
