html5文档结构层标签仅限header、main、nav、section、article、aside、footer，它们构成可被浏览器和辅助技术识别的结构性容器；div、span等不参与结构定义。
如何判断一个 HTML 标签是否属于标准文档结构层
不是所有语义化标签都算“文档结构层”——只有那些明确参与页面主干逻辑划分、被浏览器和辅助技术识别为结构性容器的标签才算。header、main、nav、section、article、aside、footer 是 HTML5 定义的**文档大纲容器**，而 div、span、p、h1 等属于内容级或表现级标签，不参与结构层级定义。
关键判断依据是：该标签是否影响 document.outline（虽未广泛实现）或被屏幕阅读器作为导航节点暴露。例如，main 必须唯一且不可嵌套在 article 或 aside 内；section 必须有可感知的标题（h1–h6），否则会被视为无意义分组。
为什么 main 不能嵌套在 article 里
HTML5 规范明确定义：main 表示“页面中与当前文档主题直接相关、且全局唯一的主要内容”，它必须是 body 的直接子元素或仅嵌套于 form（无障碍场景下）。一旦把它放进 article，语义就冲突了：一个独立内容单元（article）内部又声称自己是“整页主内容”，这会破坏文档大纲层级，导致屏幕阅读器跳过或重复播报，也干扰搜索引擎对主体内容的提取。
-
main出现在article内时，多数浏览器仍会渲染，但 DevTools 的 Accessibility 面板会标为“结构错误” - 若你真需要在文章内强调某段核心内容，用
section+h2，而非降级套main - 多个
main标签不会报错，但第二个起的会被浏览器静默忽略——document.querySelector('main')只返回第一个
浏览器怎么解析漏闭合的 section 或错嵌的 header
浏览器会自动修复语法错误，但修复方式取决于上下文，且结果未必符合你的本意。比如在 p 标签里写了 <header>xxx</header>，解析器会先关闭 p，再插入 header，最后新开一个 p 继续后面的内容——你在源码里看不到这个拆分，但在 Elements 面板里能看到突兀断开的父子关系，节点呈灰色斜体。
更隐蔽的问题是：漏写 可能导致后续所有 footer、aside 被吞进未闭合的 section 里，DOM 结构完全偏移。这时候靠看源码缩进毫无意义，必须打开 Elements 面板，找灰色节点或使用 document.body.innerHTML 对比原始 HTML 字符串。
用 outline 快速暴露结构错位比检查标签配对更有效
Auto Close Tag 类插件只管“有没有闭合”，不管“能不能放在这里”。它会帮你补上 ，但不会阻止你把 nav 放进 footer 里——而后者在语义上是允许的，在结构上却可能让导航区块脱离预期上下文。
真正暴露问题的是视觉错位：执行这段代码能让所有元素带红边框，立刻看出哪个容器撑破父级、哪个文本块被浏览器自动包裹成匿名块：
document.head.innerHTML += '<style>*{outline:1px solid red!important;background:rgba(255,0,0,0.05)!important;}</style>'
查完记得删掉：document.querySelector('style').remove()。如果页面太杂乱，缩小范围更准，比如只标记 section 和 main：section, main { outline: 2px solid #0088ff !important; }。
结构标签的真正难点不在写法，而在理解它们如何共同构成一份可被机器读取的“网页地图”。哪怕所有标签都闭合正确，只要嵌套逻辑违背规范，就等于给爬虫和读屏软件递了一张错路图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
