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