aside 标签语义是“可独立移除而不影响主内容完整性的弱关联附属内容”，非视觉侧边栏；适用人物介绍、术语解释、引用来源、相关代码示例；禁用于导航、广告、页脚等无关模块。
aside 标签不是“侧边栏容器”
aside 的语义是“与主内容相关但可独立存在、可移除而不影响主体逻辑的附属内容”，不是视觉上的“右边那块区域”。把它当成 <div class="sidebar"> 的语义替代，是常见误用。浏览器、屏幕阅读器和搜索引擎都按语义解析它，放错内容反而会干扰可访问性与 SEO。
适合放进 aside 的真实内容类型
判断标准只有一个：这段内容拿掉后，主文章是否依然完整、连贯、可理解？如果是，且它和主内容有弱关联（比如补充、注释、延伸），才考虑 aside。
- 人物介绍卡片 —— 出现在一篇讲「React 性能优化」的文章里，右侧插入
<aside><h4>Dan Abramov</h4><p>React 核心团队成员…</p></aside> - 术语解释框 —— 主文提到「hydration」，旁边用
aside给出定义和简短对比（SSR vs CSR） - 引用来源或参考文献列表 —— 不是全文 bibliography，而是当前段落直接引用的两篇论文链接
- 相关但非主线的代码片段 —— 比如主文讲 Fetch API，
aside里放一个AbortController的取消示例（不参与主流程讲解）
哪些情况坚决别用 aside
这些看似“在旁边”的内容，语义上不属于 aside 范畴：
- 导航菜单（用
nav） - 网站 logo + 全局搜索（属于
header） - 广告位、推荐位、热门文章列表（无实质内容关联，属商业模块，建议用
section+ ARIA 标识） - 页脚信息（用
footer） - 响应式折叠后的“移动侧边栏”（视觉位置变化不改变语义，仍需按内容决定标签）
嵌套位置和 DOM 结构要点
aside 可以出现在 article、section 或 body 内，但它的归属关系由所处上下文决定。同一个 aside 在 article 内表示该文章的附属内容；放在 body 级，则代表整个页面的附属信息（极少用，慎选）。
立即学习“前端免费学习笔记（深入）”；
<article>
<h2>CSS 自定义属性实践</h2>
<p>主内容…</p>
<aside>
<h3>兼容性提示</h3>
<p><code>CSS custom properties</code> 在 IE 中完全不支持…</p>
</aside>
</article>
注意：不要为了布局把 aside 塞进 main 里却让它“悬浮右移”——CSS 定位不影响语义，但会让辅助技术用户困惑内容层级。真要视觉右置，用 CSS Grid / Flex 控制即可。
最容易被忽略的是：当页面有多个逻辑独立的 article 时，每个都应有自己的 aside（如果需要），而不是共用一个“全局侧栏”。语义归属必须精确到内容块粒度。
