aside标签不能用于包裹主导航，因为其语义表示补充性内容，而主导航是页面核心结构，必须使用nav标签；仅当前文章相关的目录或延伸链接等附属性导航才可置于aside中。
aside 标签不能用来放侧边栏导航——这是语义错误，会导致屏幕阅读器误读、SEO 降权、无障碍支持失效。
为什么 aside 不该包裹主导航？
浏览器和读屏工具把 aside 解释为“补充性、非核心、可移除不影响主逻辑”的内容。主导航是全站信息入口，用户依赖它跳转，属于页面骨架级结构，语义上必须用 nav。
常见错误现象：
• 屏幕阅读器播报“辅助区域”后直接略过导航链接
• 搜索引擎降低页面结构可信度，影响关键词权重传递
• Lighthouse 审计报错：「aside 中包含关键导航，语义不匹配」
- 主导航（全站分类、首页/关于/联系等）→ 必须用
nav - 仅服务于当前文章的“本文目录锚点”或“同类教程速览”→ 可用
aside，但需紧邻article - 页脚里的“友情链接”或“合作伙伴”→ 应用
section+h2，不是aside
nav 和 aside 的实际嵌套关系
一个合理页面结构中，nav 和 aside 可共存，但角色分明：
✅ 正确示例：
<header><br> <nav aria-label="主导航">...</nav><br></header><br><main><br> <article><br> <h1>React Suspense 原理</h1><br> <p>正文…</p><br> <aside><br> <h2>本文快速导航</h2><br> <ul><li><a href="#cache">缓存机制</a></li></ul><br> </aside><br> </article><br></main>
⚠️ 错误写法：
<aside><br> <nav>...</nav> <!-- 导航被包进附属容器，语义坍塌 --><br></aside>
-
nav是独立语义区块，不应作为aside的子容器 - 若想视觉上把
nav放右边，用 CSS 控制nav自身布局，而非套一层aside - 响应式断点中，
nav在小屏常收为汉堡菜单；aside则多收至主内容下方——二者行为逻辑不同
真要用 aside 放导航类内容？只限这三种情况
极少数场景下，aside 内可含链接，但必须满足“附属性+上下文强绑定”：
- 博客文章末尾的「作者其他 3 篇相关文章」列表（
article内部） - API 文档中某接口说明旁的「相关端点」链接组（紧贴该
section） - 教程页面右侧的「本章练习题下载」「配套代码仓库」按钮（非全局，仅服务当前章节）
这些链接不是导航系统，而是对当前语义单元的延伸支撑。一旦抽掉，正文依然自洽。
性能与兼容性提醒：
• aside 本身无渲染开销，但若内部动态加载大量链接且未做懒加载，会影响首屏时间
• 旧版 Safari（≤13.1）对 aside 的 role="complementary" 识别不稳定，建议显式添加
CSS 布局时别混淆语义和视觉
即使你坚持用 aside 包了不该包的内容，CSS 也救不了语义错误。但反过来，正确语义+错误布局，至少结构没垮：
- 用
display: flex或display: grid控制nav或aside的位置，别用float -
nav推荐固定宽度 +position: sticky实现滚动吸附；aside更适合设flex: 0 0 260px配合主内容弹性伸缩 - 移动端断点里，
aside必须设为display: block; width: 100%，否则会横向溢出——这点比nav更敏感，因后者常自带折叠逻辑
最易被忽略的一点：当 aside 里有搜索框或筛选按钮时，键盘 Tab 流必须自然落入其中。如果用了 position: absolute 或 z-index 错乱，焦点会跳过整个区块——语义再准也没用。
