标题层级重构是重建DOM中内容逻辑路径，确保浏览器大纲算法生成正确语义树，以保障屏幕阅读器导航、SEO和自动化工具识别准确；需通过DevTools检查heading-level连续性，用sectioning root（如<section>）隔离层级修复跳级，动态渲染时校验最终DOM合规性，严格限定每页唯一<h1>且位于<main>内。
先确认问题是否真实存在
别只看视觉效果。打开 Chrome DevTools →「Accessibility」面板 → 展开 heading-level 列，逐个点击页面标题，观察数值是否连续、是否突变（比如从 2 直跳到 4）。右键标题 →「Reveal in Accessibility Tree」，看它在无障碍树中的实际嵌套位置。如果显示为 “level 4” 但前一个是 h2，那已发生跳级，结构已断裂。
用 sectioning root 主动隔离层级
HTML5 的 <section>、<article>、<nav>、<aside> 都是 sectioning root，它们能让内部的 <h1>–<h6> 重新计层。这不是“加个容器好看”，而是修复跳级的合法手段。
- 错误写法：
<h1>产品页</h1><h2>规格</h2><h3>尺寸</h3>→ h1 到 h3 是跳级，大纲断裂 - 正确写法：
<h1>产品页</h1><section><h2>规格</h2><h3>尺寸</h3></section>→<h2>成为该<section>的顶层标题，<h3>是其合法子级 - 注意：三层以上嵌套
<section>容易让屏幕阅读器退出困难，优先用两层：外层<section>包功能区块，内层用<h2>起始
动态渲染时守住层级底线
JS 插入标题、SSR 模板拼接、CMS 输出内容，最容易失控。关键不是“写了标签”，而是“最终 DOM 是否合规”。
- 服务端或构建阶段做校验：用
remark-lint-heading-increment检查 Markdown 渲染出的 HTML；或在 SSR 后用 jsdom 加载 HTML，跑脚本检查document.querySelectorAll('h1, h2, h3, h4, h5, h6')的 level 值是否逐级递进 - 禁止模板硬编码占位
<h1>MySite</h1>，再额外渲染一个<h1>订单确认</h1>—— 这直接导致双 h1，主标题语义被稀释 - 第三方组件（如 Card）若默认输出
<h3>标题</h3>且无意义，必须通过 props 禁用，或覆写为<div role="heading" aria-level="3">
确保 h1 位置与语义一致
<h1> 应出现在 <main> 内部，代表当前页面最核心内容主题。它不该在 <header> 的 logo 区域里——那个位置属于品牌标识，不是主体内容。
立即学习“前端免费学习笔记（深入）”；
- 正确结构：
<body><header><h1>MySite</h1></header><main><h1>订单确认</h1><p>您的订单已提交…</p></main></body> - 避免隐藏但保留：用
display: none或aria-hidden="true"把某个<h1>隐藏了，DOM 里仍存在，上下文就断了——要么删掉，要么用<span>替代 - 每个页面有且仅有一个
<h1>，且必须可被无障碍树读取，不能靠 CSS 视觉隐藏后又用 JS 动态 show
