HTML文档的大纲并非由视觉样式或任意div结构决定，而是严格依赖语义化标题标签（h1–h6）的层级顺序与嵌套逻辑——必须从h1开始、逐级递进、禁止跳级，并结合section、article等分组元素构建清晰的子大纲；浏览器和读屏软件仅据此生成真实可访问的结构，而CSS伪装的标题或class命名完全无效；实践中常见“大纲断裂”“无主标题”等问题，需借助axe DevTools、Firefox辅助功能检查器等工具验证实际解析结果，而非依赖DOM树视图；尤其在现代前端框架中，动态渲染标题极易导致首屏缺失或层级错乱，因此大纲设计应前置到页面架构阶段，确保每个逻辑单元都有语义化标题且静态存在于初始HTML中。

HTML 文档大纲由

到

的嵌套关系决定，不是靠 class 或 div 堆出来的

浏览器和读屏软件解析文档结构时，只认语义化标题标签的层级和顺序，

是顶层，

是其子节，依此类推。用

或 CSS 伪造的“标题”完全不参与大纲生成。

常见错误现象：document-outline 工具报“大纲断裂”“跳级（如

后直接

）”“无主标题（缺失

）”。

• 必须保证标题层级连续：从

  开始，下一级只能是

  ，不能跳到

• 同一层级多个

  是合法的，表示并列章节

• 应该全页唯一，且出现在主要内容区域（避开页眉/侧边栏的装饰性标题）

用 axe-core 或浏览器扩展检查大纲是否符合预期

手动数

–

容易漏，得靠工具验证实际被解析出的结构。

推荐方法：

• Chrome 安装 axe DevTools 扩展 → 打开页面 → 点 “Analyze” → 查看 “Structure” 类别下的 heading-order 和 heading-has-content 报错
• 命令行跑 axe-cli https://yoursite.com --rules=heading-order（需提前安装）
• Firefox 可用内置的“辅助功能检查器”（右键 → 检查元素 → 切到 Accessibility 面板 → 点 Outline）

注意：DevTools 的 Elements 面板里看到的 DOM 结构 ≠ 大纲结构；必须用专门的无障碍检测工具，因为它们模拟的是屏幕阅读器的真实解析逻辑。

、

等区块标签本身不生成大纲节点，但会影响标题作用域

HTML5 规范里，

、

、