一个页面应有且仅有一个<h1>，精准表达核心主题；<h2>至<h6>须严格逐级嵌套，禁止跳级或倒置，标题标签仅用于语义结构而非样式控制。
一个页面到底该有几个 <h1>？
绝大多数页面只应有且仅有一个 <h1>，它必须精准表达当前页的核心主题。SPA 路由切换后没用 JS 更新 <h1> 内容、Next.js/Nuxt 的 Layout 组件里硬塞了 <h1>、页眉固定写死 <h1>——这三类情况都会导致重复或错位。
修复方式很直接：Layout 中改用 <header> 或 <div role="banner">；页面级组件通过 useEffect（React）或 onMounted（Vue）动态更新 <h1> 文本内容。
HTML5 允许在 <section> 或 <article> 内部各自设 <h1>，但实际项目中极少需要——除非是独立可分发的文档片段（如嵌入式帮助卡片），否则统一用一个 <h1> 更稳妥、兼容性更好、Lighthouse 不报错。
<h2> 到 <h6> 的嵌套规则不能跳级
层级断裂会直接让屏幕阅读器、Lighthouse、axe 插件报错，Chrome DevTools 的 Accessibility 面板也会标红警告。常见错误包括：<h2> 后直接跟 <h4>（缺 <h3>），或 <h3> 出现在 <h2> 之前（无父级先写子级）。
立即学习“前端免费学习笔记（深入）”；
允许的结构只有两种：
-
<h2>→<h3>→<h4> -
<h2>→<h3>→<h3>（同级并列没问题）
<h5> 和 <h6> 极少需要，真实场景中基本只出现在法律条款、API 参数表这类极度细分的文档里。<h6> 不是“小号文字”，而是语义上的“最末级标题”，别拿它当备注或提示用。
标题标签不是视觉工具，别用它替代 <strong>
因为浏览器和辅助技术读出来就是“标题三级”，用户听到一串“标题三级、标题三级、标题三级”，完全无法判断这是副标题、强调句还是随便加粗的一行字。
纯视觉强调：用 <strong> + CSS 控制粗细/颜色；
语义强调（重要内容）：用 <strong>，别套标题标签；
需要结构化副标题：确保上面有 <h1> 或 <h2>，再用 <h2> 或 <h3>。
字号、颜色、间距全部交给 CSS 控制。标题层级的唯一职责是表达内容逻辑关系，不是控制样式。
动态页面里标题结构容易被忽略的点
模板系统或 CMS 输出时，常把 <h1> 硬编码进全局 layout，而 content 区域又输出一个 <h1> ——结果两个 <h1> 并存，SEO 权重分散，无障碍体验崩坏。
检查方式很简单：打开 Chrome DevTools → Elements 标签页 → 搜索 <h1，看是否唯一；再按顺序扫描 <h1>→<h2>→<h3> 是否连续、不倒置、不跳跃。
真正麻烦的是那些 JS 渲染后才生成标题的模块（比如富文本编辑器插入的标题块），它们往往绕过框架生命周期，不触发 useEffect 或 onMounted，得手动监听 DOM 变化或用 MutationObserver 补救。
