<nav>、<aside> 和 <footer> 不能作为子元素嵌套在 <header> 中，因其语义上不属于区块页眉内容；同理，<aside> 和 <footer> 也不得嵌套在 <main> 内，因 <main> 仅容主要内容。
哪些HTML5结构标签不能作为子元素嵌套在 <header> 里
<header> 本意是表示一个“内容区块的页眉”，不是整个页面的顶部栏。常见错误是把 <nav>、<aside> 或另一个 <header> 直接塞进它里面，以为“只要在顶部就该放这儿”。但语义上，<header> 应只包含本区块的标题性内容（如 <h1>～<h6>、<p>、<logo> 元素），不承载导航或侧边逻辑。
以下嵌套是**无效 HTML**（浏览器会自动纠错，但语义丢失）：
<header> <nav><ul><li>首页</li></ul></nav> <h1>文章标题</h1> </header>
正确做法是让 <nav> 与 <header> 并列，同属外层 <section> 或 <article>：
<article>
<header>
<h1>文章标题</h1>
<p>发布于 2024-05-20</p>
</header>
<nav aria-label="文章内导航">
<ul><li><a href="#intro">引言</a></li></ul>
</nav>
<p>正文开始…</p>
</article>
<main> 里为什么不能出现 <aside> 或 <footer>
<main> 表示文档中**唯一**的、与当前上下文直接相关的主要内容。它的设计约束非常明确：不能包含任何非主要内容的辅助信息——哪怕视觉上它在“主区域右侧”。
立即学习“前端免费学习笔记（深入）”；
-
<aside>属于“与主内容相关但可独立存在”的旁注，语义上不属于<main>的一部分，应放在<main>外部、同级位置 -
<footer>如果是页面级页脚（如版权信息），必须是<body>的直接子元素，或属于最外层<section>；若放在<main>内，会被解析为“该主要内容区块自己的页脚”，比如某篇博客正文末尾的作者声明，而非整页底部 - 嵌套
<header>到<main>是允许的（因为它是主内容自身的页眉），但重复嵌套多个<header>容易混淆层级
典型错误写法：
<main> <header><h1>主标题</h1></header> <p>这是主要内容</p> <aside><p>相关链接</p></aside> <footer>© 2024 site</footer> </main>
修正后应为：
<header><h1>主标题</h1></header> <main> <p>这是主要内容</p> </main> <aside><p>相关链接</p></aside> <footer>© 2024 site</footer>
用 <section> 套 <article> 还是反过来？
取决于内容关系：如果一组 <article> 属于同一主题分类（比如“前端技术”栏目下的多篇文章），那么用 <section> 包裹它们是合理的；反之，如果某篇 <article> 内部有多个逻辑分段（如“背景”“实现”“总结”），才在 <article> 内嵌 <section>。
容易错的是“为样式方便而套一层 <section>”——比如给单篇博客加个外层容器，结果写成：
<section>
<article>
<header><h1>我的第一篇博客</h1></header>
<p>…</p>
</article>
</section>
这没有语义增益，反而稀释了 <article> 的独立性。除非该 <article> 确实属于某个更大主题单元（例如“年度技术回顾”专题），否则应直接以 <article> 为顶层容器。
判断依据很简单：<article> 必须能被单独摘出、重用或 syndicate（如 RSS 推送），而 <section> 不具备这个能力。
验证嵌套是否合法的最快方式
不要依赖浏览器渲染效果——它会默默修复非法嵌套（比如把 <main><aside></main> 拆成两个兄弟节点），导致你误以为结构正确。
- 用 W3C HTML Validator（https://www.php.cn/link/33936698133cfff4e8303e4edb690110）粘贴 HTML，看是否有 “Element X not allowed as child of element Y” 类报错
- 在 Chrome DevTools 的 Elements 面板中右键节点 → “Edit as HTML”，手动删掉一个标签再恢复，观察浏览器是否自动重排结构——如果变了，说明原始嵌套已被纠正
- 检查
document.body.children的实际 DOM 结构，而不是 HTML 源码顺序；很多“看起来嵌套对”的结构，在 JS 中读出来根本不是你写的那样
语义嵌套的难点不在语法，而在对每个标签“职责边界”的理解。一旦把 <aside> 当作“右侧栏”、把 <footer> 当作“底部黑条”，就很容易写出合法但语义断裂的 HTML。
