aside应仅用于可删除而不影响主内容完整性的附属信息，如文章内术语解释、作者简介、事件时间线、技术备注、同类热销榜（无CTA）；禁用主导航、页脚、登录表单、带CTA广告、面包屑导航。
aside标签该用在哪些真实内容上？
只有删掉整个aside区块后，主内容仍能独立成立、表意完整，才考虑用它。不是“长得像侧边栏就套aside”，而是看语义是否真的附属。
常见合格场景包括：
- 文章内的术语解释卡片，比如
<h3>什么是 WebAssembly？</h3>+ 两行说明 - 博客正文旁的「本文作者」简介，含头像、职位、GitHub 链接
- 新闻稿中嵌入的「事件时间线」，独立成块且不参与叙事主线
- 技术文档右侧的「注意」「小贴士」「兼容性备注」，仅作提醒，非操作必需
- 商品页里的「同类热销榜」，前提是没放“立即购买”按钮——它不能是转化关键路径
这些内容共同点是：可跳过、可折叠、不影响主逻辑推进。
哪些地方绝对不能用aside？
用了反而破坏语义，让读屏器和搜索引擎误判。最常踩的坑是把功能型模块硬塞进aside。
立即学习“前端免费学习笔记（深入）”；
明确禁用场景：
- 主导航菜单：该用
nav，不是补充，是核心入口 - 页脚版权信息或备案号：该用
footer，属于页面级元信息 - 登录/注册表单：它是用户关键操作路径，不是附属信息
- 带 CTA 的广告横幅（如“限时领取”按钮）：读屏器默认跳过，SEO 可能降权
- 面包屑导航：应套
nav+aria-label="breadcrumb"
判断标准很简单：如果去掉这块内容，用户无法完成主要任务（比如找不到首页、登不上账号、看不到底部联系方式），那就不是aside该管的事。
DOM顺序和CSS布局怎么配合才不翻车？
aside本身不浮动、不定位、无默认样式。视觉靠右靠左，必须靠flex或grid控制；用float易塌陷，响应式难维护。
关键陷阱在 DOM 顺序：
- 如果 CSS 把
aside提到右边，但 HTML 里它写在main后面，键盘 Tab 会直接跳过它——因为焦点流按 HTML 顺序走 - 正确做法：HTML 中
aside紧跟main之后（或嵌在article内），再用order属性调整视觉位置 - 小屏下必须用
@media (max-width: 768px)把aside设为display: block并流到底部，否则横向溢出
Flex 布局天然支持逻辑流与视觉流分离：main { order: 1; }，aside { order: 2; }，哪怕aside在 HTML 中写在前面，Tab 键仍按主文→侧栏走。
嵌套和跨 article 复用要注意什么？
aside可以嵌套，但语义范围严格受限于父元素。一个aside不能同时服务两篇不同文章。
允许的嵌套方式：
- 嵌在
article内：只对该篇文章生效，比如某篇 React 教程旁的「Vue 对比表格」 - 作为
main的兄弟元素、同级于header：服务整页，如全站「热门分类」 - 延伸阅读列表里某条推荐文章自带作者引言，那条引言可再包一层
aside，但必须保持弱关联性
禁止的嵌套：
- 不能作为
header、footer、address的子元素——这些标签已有明确的内容边界定义 - 不能跨
article复用：一个aside不能同时为两篇不同文章提供补充信息
最容易被忽略的点是：语义判断永远在布局之前。先想清楚“这段内容到底服务谁、能不能删”，再决定放哪儿、怎么排版。
