HTML大纲由浏览器依W3C算法自动推导，非视觉样式决定；验证需通过Chrome Accessibility Tree检查heading-level连续性、NVDA/VoiceOver朗读测试及禁用CSS后语义校验。
一个页面的 HTML 大纲不是靠视觉样式或手动编号生成的，而是浏览器根据 <h1> 到 <h6> 的嵌套顺序和 <section> 等 sectioning root 的边界自动推导出来的。大纲断裂、标题跳级、多 <h1> 并存，这些都会直接破坏屏幕阅读器导航和 SEO 结构理解——修复它们比重写 CSS 更紧迫。
怎么验证当前页面的大纲是否真实有效
别信编辑器预览或源码里“看起来整齐”的 heading 排列。浏览器生成的大纲只认渲染后的 DOM，JS 动态插入、SSR 模板漏传、CMS 组件复用都可能让实际大纲和你写的不一致。
- 在 Chrome 或 Safari 开发者工具中打开“元素”面板，右键任意 heading → “检查可访问性树”（Accessibility Tree），展开后看 “Heading Level” 是否连续、层级是否符合预期
- 用 NVDA（Windows）或 VoiceOver（macOS）朗读整页，听它如何跳转标题——跳过某级、重复播报或卡在“无标题”区块，就是大纲异常信号
- 禁用所有 CSS 后刷新页面，观察 heading 的默认字号缩放是否仍呈现逻辑递进（
<h2>比<h3>大），这是最朴素但有效的语义校验
为什么 <section> 不能乱套，但又不能不用
<section> 是 sectioning root，它的作用不是“加个灰色背景”，而是重置 heading 的隐含层级上下文。没它，所有 <h2> 都挤在全局同一层；套太多，又会让辅助技术陷入“嵌套迷宫”。
- 每个
<section>必须有显式 heading（<h2>或更高），否则在可访问性树里显示为“无标题”，用户无法跳转定位 - 避免三层以上嵌套：比如
<section><section><section>，VoiceOver 用户要按 6 次“下一项”才能退出，体验断层 - 不要用
<section>包裹单个段落或按钮——它表达的是“主题性内容分组”，不是“为了缩进加的 div” -
<article>和<aside>也是 sectioning root，但语义更强：<article>内部的<h1>是该文章独立主题，不与主<h1>冲突
标题跳级（如 <h2> 后接 <h4>）为什么比样式错乱更危险
浏览器不会报错，但会强行把 <h4> 解释为 <h3> 的子项，而你的内容逻辑上可能根本不是从属关系。这种“隐式推断”导致大纲树节点错位，SEO 工具常标为“结构警告”，且无法被 aria-labelledby 正确引用。
立即学习“前端免费学习笔记（深入）”；
- 修复不是“补一个
<h3>”，而是先问：这个<h4>所在内容，是否真属于上一个<h2>的子模块？如果不是，就该用<section>隔开，让它成为新上下文里的<h2> - CSS 可以让
<h3>显示得比<h2>小，但绝不能删掉<h3>改用<div class="title">——后者在大纲里彻底消失 - 模板系统中注意：CMS 字段拼接、Markdown 渲染器自动降级 heading、组件 props 未透传 title 层级，都容易造成跳级，需在构建时做 lint 校验（如 axe-core 或 html-validate）
哪些地方最容易被忽略，却决定大纲成败
大纲不是写完 heading 就结束的事。它依赖三个底层锚点：文档起始的 <html lang="zh">、<head> 里紧挨着 <meta charset="UTF-8"> 的 <title>、以及 <body> 中第一个真正承载内容的 heading。缺一不可。
-
<title>不只是浏览器标签页文字，它是大纲的“根节点名称”。如果<title>是空的或动态未注入，整个大纲就失去起点 -
<lang>属性缺失会导致 VoiceOver 用错误语音引擎朗读，尤其中英文混排时语调错乱，间接影响标题停顿识别 - 所有 heading 文本必须是真实可读内容，不能是
<h2 aria-hidden="true">或<h2 style="visibility: hidden">——隐藏即删除，大纲里不留痕
