aside标签仅用于真正附属的内容，删去后主内容须仍逻辑自洽；适用场景包括术语解释、作者简介、事件时间线等；禁用场景有主导航、页脚、登录表单、带cta广告等。
aside 标签不能用来“写侧边栏”，只能用来标注“确实属于附属内容”的那一块信息——用错位置，语义就崩了，SEO 和读屏器都会误判。
哪些内容真的适合放进 aside
核心判断只有一条：删掉整个 aside 区块，主内容是否依然逻辑自洽、表意完整？是，才考虑用。
- 文章内的术语解释卡片，比如
<h3>什么是 WebAssembly？</h3>+ 两行说明 - 博客正文旁的「本文作者」简介，含头像、职位、GitHub 链接
- 新闻稿中嵌入的「人物背景」或「事件时间线」，独立成块且不参与叙事主线
- 技术文档右侧的「小贴士」「注意」「兼容性备注」，仅作提醒，非操作必需
- 商品页里的「同类热销榜」，前提是它不是转化关键路径（比如没放“立即购买”按钮）
哪些场景绝对不该用 aside
用了不仅没加分，反而会误导解析器——浏览器和读屏器会把它当“可跳过内容”处理。
- 主导航菜单：该用
nav，不是补充，是核心导航入口 - 页脚版权信息或备案号：该用
footer，属于页面级元信息 - 登录/注册表单：它是用户关键操作路径，不是附属信息
- 广告横幅（尤其带 CTA 的）：搜索引擎可能降权，且读屏器默认忽略
- 面包屑导航：应套
nav+aria-label="breadcrumb"
aside 嵌套和位置决定语义范围
放在哪儿，就服务谁。这个位置不是为了排版，而是为了绑定上下文。
- 嵌在
article内：只对该篇文章生效，比如某篇 React 教程旁的「Vue 对比表格」 - 作为
main的兄弟元素、同级于header：服务整页，如全站「热门分类」或「最近更新」 - 不能跨 article 复用：一个
aside不能同时为两篇不同文章提供补充信息 - 允许嵌套：比如「延伸阅读」列表里某条推荐文章自带作者引言，那条引言可再包一层
aside，但必须保持弱关联性
CSS 布局不改变 aside 的语义，但影响可访问性
写了 aside 却没配 CSS，它就只是个普通块级元素，堆在正文下面——这不是 bug，是预期行为。
- 视觉靠右靠左，必须靠
flex或grid控制，float易塌陷且响应式难维护 - 小屏下必须用
@media (max-width: 768px)把aside设为display: block并流到底部，否则横向溢出 - DOM 顺序要和视觉顺序一致：如果 CSS 把
aside提到右边，但 HTML 里它写在main后面，键盘 Tab 会直接跳过它 - 若
aside里全是链接或广告，建议加aria-label，比如aria-label="相关推荐"，帮读屏器理解用途
最容易被忽略的点是：语义判断永远在布局之前。先想清楚“这段内容是不是真能删”，再决定要不要用 aside；写完标签之后，立刻检查它在小屏下的 DOM 位置和焦点顺序——这两处一错，可访问性就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
