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><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器"><img
														src="https://img.php.cn/upload/skill/000/000/081/179220974213190.jpg" alt="HTML汇报生成器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器" class="overflowclass">HTML汇报生成器</a>
													<p class="overflowclass">🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
<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 错乱，焦点会跳过整个区块——语义再准也没用。