HTML5多层级标题设计需确保屏幕阅读器准确构建文档大纲，核心是唯一h1、层级连续、语义正确、动态内容同步可访问性状态。
HTML5 中设计多层级标题，核心是让屏幕阅读器能准确构建文档大纲，同时保持视觉结构与语义一致。关键不是“能用几个h几”，而是“怎么用才不打断逻辑流”。
必须只有一个主标题（h1）且放在主内容开头
全页只设一个 <h1></h1>，代表整页唯一主题，比如文章标题、产品主名称或页面核心目的。它应紧邻 <main></main> 开始处，不能藏在 header 里当 logo 文字，也不能被 JS 延迟注入。若 CMS 模板中轮播图、卡片模块各自塞一个 <h1></h1>，读屏器会无法判断哪一个是真正的页面主题。
层级必须连续，禁止跳级
从 <h1></h1> 出发，后续只能是 <h2></h2> → <h3></h3> → <h4></h4> 这样逐级展开。出现 <h2></h2> 后直接 <h4></h4>，无障碍检查工具会报 heading-level-skipped 错误，屏幕阅读器用户按 H 键跳转时会“掉层”，以为章节已结束。
- 同级并列可以：
<h2></h2>、<h2></h2>是合法的 - 降级必须完整：
<h2></h2>下该用<h3></h3>，而不是为“看起来小一点”改用<h4></h4> - 真需更细组织？优先用
<dl></dl>、<details></details>或带语义 class 的<div>，而非硬塞 <code><h5></h5>/<h6></h6>表格内不能直接放标题，要用 ARIA 明确隶属关系
在
<td> 或 <code><th> 里写 <code><h3></h3>是非法 HTML5 写法，也会切断与上方标题的语义关联。正确做法是：立即学习“前端免费学习笔记（深入）”；
- 给对应
<th> 设 <code>id（如id="sales-q2"） - 在
<td> 内用 <code><div role="group" aria-labelledby="sales-q2 sub-label"> <li>把子标题文字放在 <code><p id="sub-label" aria-hidden="true"></p>中，仅作命名源，不重复朗读 - 确保新标题紧跟在上一级标题之后，不破坏嵌套路径
- 调用
document.getElementById('main').focus()把焦点移到新区块起始 - 若内容重要，配合
aria-live="polite"提示变化，避免静默更新 - 禁用
v-html或dangerouslySetInnerHTML拼接标题——拼错一个字符，整个大纲就失效
这样屏幕阅读器会读作“Sales Q2 April Target Reached”，清晰传达归属。
动态内容插入标题时，要同步更新可访问性状态
用 JS 或 htmx 加载新章节后，如果新增了
<h2></h2>，不能只加 DOM： - 给对应
