HTML大纲解析的硬性前提是：main必须唯一、h1–h6不能跳级、section必须带标题；否则屏幕阅读器和搜索引擎无法构建正确导航树，导致辅助技术失效、SEO降权及用户迷路。
main 必须唯一，h1–h6 不能跳级，section 必须带标题——这三条是 HTML 大纲（Document Outline）可被正确解析的硬性前提。不满足，屏幕阅读器和搜索引擎都会“看不懂”页面结构。
为什么大纲错乱会导致辅助技术失效
大纲不是给开发者看的，是给屏幕阅读器（VoiceOver/TalkBack）和爬虫用的导航骨架。它不依赖 CSS 渲染顺序，只按 HTML 标签嵌套 + heading 层级生成逻辑树。
-
main出现两次或嵌套在header里：屏幕阅读器按 M 键跳转时只会停在第一个，第二个被忽略；用户得手动听完整页才能找到正文 -
h2后直接写h4：大纲断裂，读屏工具无法建立子模块归属关系，语音导航变成“平铺直叙”，失去章节感 - 空
section或仅含广告的article：被识别为“有标题但无实质内容”的干扰节点，辅助技术会多遍历、拖慢响应，用户耐心耗尽
section 和 article 的使用边界在哪
二者都生成大纲节点，但语义完全不同，混用会污染结构权重。
-
section：必须自带h2–h6，且内容能构成一个逻辑闭环（如“用户评价”“配置参数”）。没有标题就别用——<section><p>欢迎关注我们</p></section>是典型错误 -
article：代表可独立分发、复用的内容单元，比如博客正文、商品卡片、新闻条目。它自带隐式大纲层级，内部应有自己完整的标题体系（h1–h6），且可被 RSS 抓取或邮件推送 - 误用后果：
article套广告位，会被爬虫判定为“主内容干扰”，降权；section套表单步骤，若无标题，读屏工具无法告知用户“这是第几步”
标题层级断裂的三种高发场景
不是“写了 heading 就算合规”，而是整个文档必须形成连续、嵌套、无跳跃的树状结构。
立即学习“前端免费学习笔记（深入）”；
-
main外塞了三个h1：全页只有一个h1才合法，多余h1不会提升权重，反而让大纲根节点混乱 - 页面从
h2开始：说明缺失顶层主题，main内容缺乏锚定，读屏工具无法定位“这是什么页面” -
section用h3起始，但父级没出现h2：该section在大纲中悬空，既不属于主内容，也不属于任何上层模块
如何验证大纲是否真实有效
别信“代码看着整齐”，要用机器视角验证。Chrome DevTools 本身不显示大纲，需借助外部工具或手动模拟：
- 用 Chrome 插件 “HeadingsMap” 或 “HTML CodeSniffer” 直接渲染大纲树，检查节点是否连贯、有无孤点
- 禁用 CSS 后肉眼观察结构流：如果视觉顺序和 DOM 顺序不一致（比如靠
flex order或float调序），大纲必然错乱——辅助技术永远按 DOM 顺序读 - 真机测试：iOS 上打开 VoiceOver，Android 上开 TalkBack，用“按标题导航”功能走一遍，卡在哪儿，哪儿就是大纲断点
最容易被忽略的是：大纲有效性不取决于标签数量，而取决于每个语义容器是否承载了它该承载的内容。一个干净的 main + 一组带标题的 section + 严格递进的 heading，比堆满 div 和 aria-label 的页面更可靠。结构对了，后续所有可访问性和 SEO 优化才有基础。
