语义化标签嵌套需遵循w3c内容模型：如可含但不可含或；必须为直接子元素且全局唯一；/可在内嵌套，但不可含等冲突标签；可含，反之不成立。
哪些语义化标签能互相嵌套？看内容模型而非视觉习惯
浏览器不看“长得像不像容器”，只认 W3C 定义的 content model（内容模型）。比如 <nav></nav> 允许包含 <ul></ul>、<ol></ol>、<div>，但不允许直接放 <code><main></main> 或另一个 <nav></nav>；<main></main> 必须是 的直接子元素，且不能出现在 <article></article>、<section></section>、<header></header> 内部。
常见误用场景：
- 把
<nav></nav>塞进<footer></footer>里当“底部链接区”——错，<footer></footer>不是通用容器，它只承载本级内容的元信息（如版权、作者、相关文档），导航应独立存在或用<aside></aside> - 在
<article></article>里再包一层<main></main>——错，<main></main>全局唯一，嵌套即非法，浏览器会静默忽略第二个<main></main>的语义 - 用
<section></section>包裹没有标题的纯功能区块（如搜索框、登录表单）——错，<section></section>要求必须有<h2></h2>–<h6></h6>，否则语义断裂，应改用<div> 或更贴切的 <code><form></form><header></header>和<footer></footer>可以嵌套，但不是无限制套娃每个
<article></article>、<section></section>、甚至<aside></aside>都可以有自己的<header></header>和<footer></footer>，这是合法且推荐的。但它们的角色是“本级内容的头部/尾部”，不是“全局布局占位符”。关键约束：
-
<header></header>里不能放<main></main>、<footer></footer>、<aside></aside>—— 这些标签语义冲突，浏览器解析时可能自动拆解结构 -
<footer></footer>内禁止出现主导航（<nav></nav>），也不该放用户评论列表（那是<section></section>或<article></article>的职责） - 同一级
<section></section>中，<header></header>和<footer></footer>必须成对出现于该<section></section>的开头和结尾，不能跨层级错位
<article></article>嵌套<section></section>是标准用法，但反过来不行<article></article>表示可独立分发、复用的内容单元（如一篇博客、一条新闻、一个用户评论），它天然支持内部按主题分段，因此<section></section>是它的合法子元素。而
<section></section>只是主题分组，不具备独立传播性，所以它不能作为<article></article>的父容器。强行写成<section><article>...</article></section>虽然语法不报错，但会稀释<article></article>的语义强度，搜索引擎和 RSS 抓取器可能降权处理。实操建议：
- 若某段内容带标题、有明确主题、且能脱离当前页面被单独引用（比如“安装步骤”“FAQ”），优先用
<section></section> - 若该内容本身具备完整上下文、可被分享/订阅/归档（如“React 19 新特性详解”整篇），必须用
<article></article> - 不要为“看起来整齐”而硬套
<article></article>：侧边栏广告、页脚版权栏、面包屑导航都不是<article></article>
嵌套出错时，DOM 树比渲染效果更值得先查
很多嵌套错误不会导致页面“崩掉”，而是让 DOM 树悄悄变形——比如你写了
，浏览器会自动闭合<p></p> <div>xxx</div><p></p>，把<div> 提到外面，后续所有样式和 JS 查询都可能失效。 <p>快速定位方式：</p> <ul> <li>打开 Chrome DevTools → Elements 面板，**别只看源码**，重点观察右侧实时生成的 DOM 树结构是否符合预期</li> <li>检查 <code><main></main>是否真的只有一个，且位于下一级；<nav></nav>是否被意外包裹在<p></p>或<span></span>里 -
- 用 Lighthouse 的 “Accessibility” 报告扫描，它会直接标出
<main></main>重复、<header></header>缺失标题、<section></section>无标题等嵌套语义问题
最常被忽略的一点：嵌套规则不是为了“让代码好看”，而是为了让机器（浏览器、爬虫、读屏软件）能准确推断内容关系。一旦 DOM 树被浏览器自动修正，原始意图就永远丢失了。
