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><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></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 优化才有基础。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
