main 和 aside 必须同级，因 HTML5 禁止 aside 嵌套于 main 内；section 需有标题才合法，非布局容器；nav 仅用于主导航，aside 须与当前内容相关且可独立存在。
<main></main> 必须是 的直接子元素且只出现一次，三栏结构的语义骨架不是“视觉并排”，而是层级合法、角色清晰的 DOM 关系。
main 和 aside 为什么必须同级？
HTML5 规范明确禁止 <main></main> 出现在 <aside></aside>、<nav></nav>、<header></header> 或 <footer></footer> 内部。一旦把右栏 <aside></aside> 塞进 <main></main>，就等于告诉屏幕阅读器：“这部分是主内容的一部分”，而它实际只是补充信息。
- 常见错误：
<main><aside>...</aside></main>—— Lighthouse 会报 “Multiple main landmarks” 或直接忽略嵌套的<main></main> - 正确层级只能是：
→<header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer>并列 - CSS 用
display: grid或flex实现三栏视觉效果完全没问题，但 DOM 层级不能妥协
section 不是 div 替代品，没标题就别用
<section></section> 的本质是“带标题的逻辑分组”，不是为了撑宽度、加边框或套样式而存在的容器。没有 <h2>–<h6> 的 <section></section>，在语义上和 <div> 完全等价，还多一个无意义节点。
<ul>
<li>可用场景：产品页中「功能介绍」<code><h2> + 内容、「用户评价」<h2> + 列表、「技术参数」<h2> + 表格
<section class="grid-container"> —— 纯布局用途，该用 <div> 或直接设 <code>display: grid 在 <main></main> 上
<article></article> 里用 <section></section> 没问题，但若里面再套一个没 <h3> 的 <section></section>，就该换成 <article></article> 或普通 <div>
<h3>nav 和 aside 的适用边界在哪？</h3>
<p>标签不是“位置决定论”，而是“内容意图决定论”。左侧固定菜单不等于 <code><nav></nav>，右侧浮动栏也不自动成为 <aside></aside>。
立即学习“前端免费学习笔记（深入）”；
-
<nav></nav>只用于主导航：通常是全站一级导航（首页、文章、关于），且链接数不宜过多；面包屑、页脚链接、社交图标列表应降级为<ol>或普通<ul> -
<aside></aside>要满足三个条件：与当前上下文相关、可独立存在、不构成主线内容；比如文章页右侧的「作者简介」<aside><h3>作者</h3><p>...</p></aside> - 误用高发区：把广告位、全站通用侧边工具栏硬套
<aside></aside>—— 与当前文章无关的广告应使用<div role="complementary">或直接<div>
真正难的不是写对标签，而是每次写 <section></section> 前停顿半秒问自己：“它有标题吗？这个标题能准确概括里面所有内容吗？”——语义断裂往往始于一个没想清楚的 <h2>。
