section 是否构成大纲节点?只有当 section 内部含有至少一个标题级元素(h1–h6)时,才被识别为大纲中的独立节点并参与层级嵌套;若无标题,则仅作语义分组,不生成大纲条目。

section 标签本身不自动产生明确的层级编号(如 1、1.1、2 等),它在页面大纲算法中是否形成新层级,取决于是否包含带语义的标题元素(h1–h6)。
section 是否构成大纲节点?
只有当 section 内部含有至少一个标题级元素(h1–h6)时,该 section 才会被浏览器和辅助技术识别为大纲中的一个独立节点,并参与层级嵌套计算。
- 若
section没有标题,它不会出现在大纲中,仅作为语义分组容器,不影响层级结构 - 即使嵌套多层
section,若内部无标题,整个嵌套链仍不生成大纲条目 - 大纲层级由标题的“相对等级”决定,而非
section的嵌套深度
标题决定实际层级位置
section 内部的标题(如 h3)所处的大纲层级,不是由其标签数字直接映射,而是依据它在文档中**最近的、更高级别标题的上下文**推导而来。
- 例如:外部是
h2,内部section中写h4,大纲中该section节点仍作为h2的子级出现(即逻辑层级为 2.1),而非跳到第 4 层 - 推荐做法:使用
h2–h6按语义递进,避免跨级跳跃(如h2后直接用h5),否则可能造成大纲断裂或工具解析异常
与 article、nav、main 等语义元素的区别
section 是通用分组容器,不具备默认的大纲入口行为;而 article、aside、nav 等元素即使没有标题,部分辅助技术也可能为其生成隐式大纲节点(但非规范强制要求)。
-
section的大纲角色完全依赖标题——有标题才入纲,无标题则“不可见” -
article可独立成文,即便无标题,某些阅读器仍会将其视为可折叠的大纲单元 - 为确保兼容性和可访问性,所有
section都应配一个恰当的标题(哪怕视觉上隐藏)
验证与调试建议
可通过浏览器开发者工具的“Accessibility”面板或专用大纲查看器(如 axe DevTools、WebAIM’s Outline Tool)实时检查生成的大纲结构。
- Chrome:右键 → “检查” → 切换到 Accessibility 标签页 → 查看“Landmark and heading structure”
- 避免依赖
section数量推测层级——真正起作用的是标题的嵌套关系 - 注意:HTML5.2 规范明确指出,大纲算法已不再被主流浏览器原生实现(如 Chrome/Firefox 不渲染完整文档大纲树),但屏幕阅读器仍普遍遵循该逻辑











