一个页面应有且仅有一个<h1>，代表核心主题；<h2>至<h6>须严格逐级嵌套，禁止跳级，否则导致语义断裂、无障碍报错及SEO失效。
一个页面到底该有几个 <h1>？
绝大多数普通页面（非 article/section 独立语义区块）只应有且仅有一个 <h1>，它必须精准表达当前页的核心主题。比如登录页写 <h1>用户登录</h1>，订单页写 <h1>订单确认</h1>。不是“首页”“欢迎来到 XX”，更不能是重复的网站名。
常见错误：
- 页眉固定写死
<h1>MySite</h1>，所有页面都一样 - SPA 路由切换后没用 JS 更新
<h1>内容，仍显示上一页标题 - Next.js/Nuxt 的 Layout 组件里塞了
<h1>，和 Page Component 的<h1>一起渲染，导致重复
修复方式：Layout 中用 <header> 或 <div role="banner">；页面组件通过 useEffect（React）或 onMounted（Vue）动态更新 <h1> 文本。
<h2> 到 <h6> 能不能跳级使用？
不能。层级断裂会直接让屏幕阅读器、Lighthouse、axe 插件报错，Chrome DevTools 的 Accessibility 面板也会标红警告。
立即学习“前端免费学习笔记（深入）”；
允许的嵌套：
-
<h2>→<h3>→<h4> -
<h2>→<h3>→<h3>（同级并列没问题）
禁止的嵌套：
-
<h2>后直接<h4>（缺<h3>） -
<h3>出现在<h2>之前（无父级先写子级） - 用
<h6>当备注说明、小字提示——它语义是“最末级标题”，不是“小号文字”
真实场景中，<h5> 和 <h6> 极少需要，除非是法律条款、API 参数表这类极度细分的文档结构。
为什么不能用 <h3> 替代加粗段落？
因为浏览器和辅助技术读出来就是“标题三级”，用户听到一串“标题三级、标题三级、标题三级”，完全无法判断这是副标题、强调句还是随便加粗的一行字。
真正该用什么：
- 纯视觉强调：用
<strong>+ CSS 控制粗细/颜色 - 语义强调（重要内容）：用
<strong>，别套标题标签 - 需要结构化副标题：确保上面有
<h1>或<h2>，再用<h2>或<h3>
CSS 可以把所有 <h1>–<h6> 的 font-size、margin 全部重置，但语义层级一旦写进 HTML，就不可逆——屏幕阅读器不会看你 CSS 有没有隐藏或缩放。
组件库里的 <h3> 为什么总出问题？
Card、Modal、Accordion 这类通用组件如果内部硬编码 <h3>，嵌套到页面时极易破坏整体层级。比如页面主结构是 <h1>→<h2>，Card 里又来个 <h3>，看似合理，但如果 Card 被放在 <h2> 前面，或被多个 <h2> 共享，层级就乱了。
安全做法：
- 组件提供
titleLevelprop（如titleLevel="2"），由父级决定该用几级 - 默认 fallback 为
<div>或<span>，不预设语义 - SSR/静态站生成器中，检查最终 HTML 输出，用 Lighthouse 扫描 heading-order 错误
最易被忽略的一点：JSDOM 测试环境通常不校验标题顺序，但真实用户和搜索引擎看的是最终渲染的 HTML 结构——别等上线后被 SEO 报警才想起查 <h1> 是否唯一、<h2> 是否漏掉。
