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