HTML5大纲插件通过解析标题嵌套与语义标签生成结构快照，核心是验证h1唯一性、区块标题完整性、层级连续性及语义容器正确使用，发现问题后需手动修正源码而非依赖插件修复。
用 HTML5 大纲插件检查语义化结构，核心是看浏览器是否能自动解析出清晰、连贯的文档层级——它不依赖样式，只认标签逻辑和标题嵌套关系。插件生成的“大纲视图”就是页面结构的客观快照，比人工扫代码更直观、更可靠。
安装并启用大纲插件
主流浏览器（Chrome、Edge、Firefox）均有成熟插件，如 “HTML5 Outliner” 或 “HeadingMap”。安装后地址栏会出现图标，点击即可弹出当前页的大纲树。注意：必须确保页面已加载完成，且 DOM 已就绪（避免在 JS 渲染前检查）。
看懂大纲输出的关键信号
插件列出的缩进结构，本质是 HTML5 sectioning algorithm 的运行结果。重点关注以下几点：
- 主标题是否为唯一的 h1，且位于顶层（无缩进）
- 每个 article、section、nav、aside 是否自带可识别的标题（如 h2–h6），而非显示为 “Untitled section”
- 是否存在意外嵌套，例如 main 出现在 article 内部，或多个同级 h1 导致大纲分裂
- nav 和 aside 中出现 “Untitled article” 可忽略，这是正常行为，不必修复
结合插件快速定位典型问题
大纲异常往往对应具体编码失误，可按提示反向排查：
立即学习“前端免费学习笔记（深入）”；
- 若某区块显示 “Untitled section”，检查是否漏写了 heading（如 h2），或误用 div 替代了 section/article
- 若大纲中出现多条顶层条目（多个无缩进项），大概率存在多个 h1，或 main 外包了非主体内容（如导航、侧栏）
- 若标题层级跳变（如 h2 后直接 h4），大纲会断层，辅助技术将无法线性朗读，需补全缺失层级或调整 heading 顺序
- 若整个大纲为空或仅显示 “Document”，说明页面缺少有效 heading 或语义容器，可能连 header、main 都未使用
验证后该做什么
大纲插件是诊断工具，不是修正工具。发现问题后需手动修改源码：
- 把包裹全页的 div class="wrapper" 替换为 main，但务必确认它只包含真正核心内容
- 每篇独立博文、新闻稿、论坛帖，统一用 article 包裹，并在其内部配 h1 或 h2 标题
- 主导航菜单外层加 nav，页脚版权区域用 footer，避免再用 class="footer" 的 div
- 删掉无语义的嵌套 div，优先用 figure+figcaption 替代图文组合，用 time datetime 替代纯文本日期
