不能嵌套在内，因其是唯一主内容容器，w3c规定不可被等语义标签包裹；与是协作关系，非强制父子；嵌套超三层应优先选用等语义标签替代无意义。
嵌套层级必须语义对齐，不能只看视觉效果堆叠。浏览器和辅助工具会按标签的语义角色解析结构，不是按你写的缩进或样式来理解“谁包着谁”。
为什么 <main></main> 不能套在 <section></section> 里
<main></main> 表示页面中唯一、可独立分发的核心内容区域，它本身就是一个顶级语义容器。W3C 明确规定它不能被 <article></article>、<aside></aside>、<footer></footer>、<header></header>、<nav></nav> 或 <section></section> 包裹。
- 错误写法：
<section><main>...</main></section>—— 浏览器不会报错，但语义失效，<main></main>的“唯一性”被破坏 - 正确逻辑：如果一段内容是整页主干（如博客正文），就直接用
<main></main>；它内部可以再用<section></section>划分小节，但反过来不行 - 实际影响：屏幕阅读器可能跳过
<main></main>的导航快捷键，SEO 工具也可能降权该区块
<nav></nav> 和 <ul></ul> 的嵌套边界在哪
<nav></nav> 描述的是“页面级导航入口集合”，不是所有带链接的列表都算。它和 <ul></ul> 是协作关系，不是父子服从关系。
- 首页顶部主导航、侧边栏目导航、页脚“友情链接”——前两者适合
<nav></nav>，后者通常不用，除非它是站内主要跳转通道 -
<nav></nav>内部推荐用<ul></ul>+<li>，但不是强制；也可以直接放<a></a>，只要语义清晰 - 常见错误：
<div role="navigation"> 替代 <code><nav></nav>—— 多余且削弱可访问性，真要导航就用原生<nav></nav>嵌套过深时，
<div> 和语义标签怎么选 <p>层级扁平化不是靠少写几层 <code><div>，而是看每一层是否承担明确语义角色。当嵌套超过 3 层，先问：有没有更贴切的语义标签可替代？ <ul> <li>比如：<code><div class="card"><div class="card-body"><p>...</p></div></div>→ 可简化为<article><p>...</p></article>，去掉中间层 - 再比如：
<div id="header"><div class="logo"><h1>...</h1></div></div>→ 直接用<header><h1>...</h1></header>
- 关键判断点：如果某一层
<div> 只为样式或 JS 选中服务，没语义价值，就该删或换；如果它确实承载内容角色（如“侧边工具栏”），优先查 W3C 推荐标签，而不是硬套 <code><div> <p>最容易被忽略的是：嵌套合法性 ≠ 渲染正常。很多结构浏览器能“容错渲染”，但一接入自动化测试、读屏器或 SEO 工具，语义断层立刻暴露。写完检查一遍 <code><main></main>、<nav></nav>、<header></header>是否被误包、误复用，比调样式花的时间少，却决定页面能不能被真正“读懂”。
