html5大纲算法是已废弃的理论规则，未被任何主流浏览器实现；它曾试图按语义区块嵌套推导标题层级，但因兼容性、可控性与互操作性问题，于2019年被whatwg正式移除。
HTML5 大纲算法（Outline Algorithm）并不是浏览器实际实现的、用于生成文档结构的强制性规范，而是一个理论上的结构推导规则，定义在 HTML5 规范早期草案中，用于从语义化标题元素（<h1></h1>–<h6></h6>）和<section></section>、<article></article>、<nav></nav>、<aside></aside>）中自动构建逻辑层级树。但需明确：目前所有主流浏览器均未实现该算法，也不用它来生成可访问性树或渲染大纲。
大纲算法的核心逻辑
该算法试图脱离标题标签的数字层级（如 h1 > h2 > h3），转而依据嵌套关系与语义区块划分层级：
- 每个
<section></section>、<article></article>等 sectioning root 元素创建一个新“节”（section），其内部标题（无论 h1–h6）默认被视为该节的标题； - 标题的“级别”由其所在节的嵌套深度决定，而非标签名本身——例如，一个嵌套三层的
<article></article>内的<h1></h1>，在大纲中等效于 h4； - 若某节内无显式标题，算法会尝试用第一个标题性内容（如
<hgroup></hgroup>或首个标题元素）补全，否则该节可能无标题； - 多个同级节（如并列的
<section></section>）在大纲中处于同一层级，彼此平级。
为什么浏览器不实现它？
大纲算法虽逻辑自洽，但在实践中引发诸多兼容性和可用性问题：
- 与既有内容严重冲突：数以亿计的网页依赖 h1–h6 的显式层级表达结构，突然改用嵌套推导会打乱屏幕阅读器对标题顺序的理解；
- 开发者控制力下降：h1 被降级为“节内首标”，导致无法可靠地标记主标题（如页面 logo 下的 h1），影响 SEO 和辅助技术识别；
- 缺乏互操作性证据：W3C 和 WHATWG 在多次审查后确认，没有浏览器厂商提交过完整、稳定的实现方案；
- 2019 年起，WHATWG HTML Living Standard 已正式移除大纲算法描述，仅保留“作者应使用适当的标题级别反映文档结构”的指导性建议。
实际开发中该怎么组织标题结构？
既然大纲算法不生效，真实有效的结构完全取决于你如何使用标题标签和语义元素：
-
坚持 h1–h6 的显式层级：每个页面有且仅有一个
<h1></h1>（主标题），子区域用 h2，子子区域用 h3，依此类推； -
用 sectioning 元素包裹并强化语义，但不依赖它们“重置”标题级别——
<section><h2>产品介绍</h2></section>中的 h2 仍是二级标题； - 避免跳级（如 h1 后直接 h3）、避免重复 h1（除非是独立 article/section 的微格式场景）；
- 借助
<hgroup></hgroup>（已废弃，不推荐）或 ARIAaria-labelledby处理复杂标题组合，优先保障屏幕阅读器可读性。
可访问性工具怎么看标题结构？
当前所有主流屏幕阅读器（NVDA、JAWS、VoiceOver）和浏览器开发者工具（如 Chrome 的「Accessibility」面板）都直接解析 h1–h6 标签的字面级别，忽略 sectioning 元素的嵌套关系：
- Chrome DevTools 的「Accessibility Tree」会忠实展示 h1、h2…节点及其顺序；
- AXE、Lighthouse 等自动化检测工具也只校验标题是否按数字顺序合理嵌套；
- 所谓“HTML5 大纲视图”仅存在于部分旧版插件（如 Firefox 的 “HTML5 Outliner” 插件）或教学演示工具中，不具备现实约束力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
