aside是语义化的“附属内容”容器，表示与主内容相关但可独立存在的非核心信息；应依据内容逻辑关系而非视觉位置选用，删除后主内容须仍完整自洽。
aside 标签不是“侧边栏容器”，而是语义上的“附属内容”
很多人一看到 aside 就直接当 CSS 布局用的“侧边栏盒子”，这是最典型的误用。HTML5 规范明确说：aside 表示**与主内容相关但可独立存在、非核心的附属信息**，比如引用、术语解释、作者简介、相关链接列表、广告——但前提是它和当前页面/文章内容有逻辑关联。
如果只是单纯为了实现视觉上的右栏布局（比如固定宽度 + float / flex），用 div 更合适；强行套 aside 反而污染语义，影响可访问性（屏幕阅读器会读作“附属内容”）和 SEO。
什么场景下该用 aside？看内容关系，不看位置
判断是否该用 aside，只问一个问题：把它整个删掉，主内容是否依然完整、自洽、表意清晰？如果答案是“是”，那它大概率适合 aside。
- 一篇技术文章里嵌入一段
引用某位专家对这个概念的评价 → 适合aside - 博客正文下方列出“本文作者的其他 3 篇相关文章” → 适合
aside（前提是这些文章确实主题强相关） - 产品页右侧放一个“联系我们”的表单 → 不适合
aside（它是功能入口，不是附属说明） - 全局导航栏或页脚版权信息 → 绝对不能用
aside（它们属于文档结构，该用nav或footer）
aside 放哪？可以嵌套在 article 里，也可以在 body 顶层
aside 的作用域取决于它的父元素。它既可以作为整页的附属信息（如全站最新公告），也可以限定在某个 article 内部（如某篇文章的背景知识框）。
立即学习“前端免费学习笔记（深入）”；
Web Components 入门
自定义元素、Shadow DOM……
注意：aside 在 article 内部时，会被理解为“这篇文章的附属内容”；放在 body 直接子级，则代表“整个页面的附属内容”。别把它塞进 header 或 main 里凑结构——没意义，还可能破坏语义层级。
样式和兼容性：它不自带样式，也不需要特殊 hack
aside 是纯语义标签，浏览器默认只给它 display: block，没有 margin/padding，更不会自动浮动到右边。你用 Flex/Grid 定位它，和用 div 没任何区别。
兼容性完全不是问题：IE9+、所有现代浏览器都支持。但要注意两点：
- 旧版辅助技术（如某些 IE + JAWS 组合）可能忽略语义，但这是小概率；主流读屏软件（NVDA、VoiceOver）都能正确识别
aside并提示“complementary content” - 别为了“看起来像侧边栏”而给
aside加role="complementary"—— 它本就隐含这个 role，重复声明反而可能干扰解析
真正容易被忽略的是：同一个页面中多个 aside 之间没有隐含关系。如果你放了两个，得靠 heading 层级（h2/h3）或 aria-labelledby 明确它们各自的用途，否则屏幕阅读器用户可能分不清哪个是“作者介绍”、哪个是“延伸阅读”。
