<aside>标签不能用于导航，因其语义为“补充性内容”，而导航必须使用<nav>标签以确保被正确识别为“navigation”地标；混用会导致读屏器跳过、SEO降权及无障碍检测报错。
aside 标签不能用于导航——这是最常踩的语义错误。 它只适用于补充性、附属性内容，比如作者简介、相关链接列表、术语解释；主导航必须用 <nav>。
为什么不能用 <aside> 包导航菜单
浏览器和屏幕阅读器会把 <aside> 解析为 “complementary”（补充性）地标，而导航属于核心交互路径，应归类为 “navigation” 地标。混用会导致：
- 读屏器跳过该区域或错误归类，视障用户无法通过地标快捷导航
- 搜索引擎可能降低该导航区块的权重，影响站内链接发现
- 无障碍检测工具（如 axe、WAVE）直接报错：
Landmark is not unique或Navigation landmark missing
正确结构：用 <nav> 做导航，<aside> 做补充
侧边栏里常有两类内容，必须分开包裹：
- 主导航（如“分类目录”“用户中心”“快捷入口”）→ 必须用
<nav aria-label="站点主菜单"> - 补充信息（如“作者简介”“标签云”“延伸阅读”）→ 才适合用
<aside>，可加role="complementary"显式强化语义
示例结构：
<aside>
<h2>作者简介</h2>
<p>前端工程师，专注无障碍与语义化开发。</p>
</aside>
<nav aria-label="文章分类导航">
<ul>
<li><a href="/category/frontend" aria-current="page">前端技术</a></li>
<li><a href="/category/a11y">无障碍</a></li>
</ul>
</nav>
布局上怎么让 <nav> 和 <aside> 都出现在侧边
标签本身不决定位置，靠 CSS 控制。现代推荐用 display: flex 或 display: grid，且注意顺序与可访问性：
- HTML 中把
<nav>放在<aside>前面，符合逻辑流和键盘 tab 顺序 - Flex 布局中避免用
order颠倒视觉顺序，否则 tab 键会先到下面的内容 - Grid 布局更可控：
grid-column: 2可固定侧边栏列，但需确保<main>占第 1 列 - 小屏下统一设
@media (max-width: 768px) { aside, nav { width: 100%; } }，避免横向溢出
容易被忽略的细节
很多人写对了标签却仍被反馈“导航不可读”，问题往往出在：
-
<nav>缺少aria-label或aria-labelledby，导致读屏器只读“navigation”，不知用途 -
<aside>里塞了登录表单或搜索框——这些是独立交互模块，该用<form>+role="search"，不是补充内容 - 整个侧边栏被包进一个
<div class="sidebar">，再里面混用<nav>和<aside>，但没给父容器明确语义，造成地标嵌套混乱
真正关键的不是“怎么让它靠右”，而是“怎么让机器和人都清楚每块内容在干什么”。标签选错，后面所有样式和 JS 都救不回来。
