aside是语义标签，专用于标记与主内容相关但可独立移除的辅助性内容，如术语解释、作者简介等；它不控制布局，需配合CSS实现视觉侧边效果，且必须满足逻辑关联、主文自洽、自身完整三条件。

aside 标签在 HTML5 中专用于标记与主内容相关但非核心的辅助性内容，它不是简单的“侧边栏容器”，而是带有明确语义的元素——浏览器、屏幕阅读器和搜索引擎都能据此理解这部分内容的从属关系。

何时该用 aside：判断辅助性的关键

使用 aside 的前提是内容必须“可独立存在，且对主内容起补充、对照或延伸作用”。比如文章中插入的术语解释、作者背景简介、相关新闻链接、引用出处，或某段技术说明旁的注意事项框。若侧边栏里放的是全站导航、logo 或登录入口，这些属于站点级通用结构，应使用 nav、header 或 section，而非 aside。

• ✅ 适合：某篇博客正文旁的“延伸阅读”列表、“本节涉及标准”说明、“作者其他作品”推荐
• ❌ 不适合：网站顶部导航、底部版权信息、全局搜索框、固定悬浮客服按钮

嵌套位置决定语义范围

aside 的语义范围由其父级上下文决定。如果放在 article 内部，它就只关联这篇文章；若放在 main 下但脱离具体文章，则可能服务于整个页面主题；若置于 body 最外层，则语义较弱，易被忽略。建议优先让 aside 紧邻其所补充的内容块。

• 推荐：article > aside（如：一篇教程文末的“常见误区提醒”）
• 慎用：body > aside（除非是整站级的通用注释，如“本站数据更新于…”）
• 避免：aside 套 aside（嵌套会模糊语义层级，可用 section 或 div 分组）

样式与布局不改变语义，但需兼顾可访问性

CSS 可将 aside 浮动到右侧、设为 sticky 定位或折叠为抽屉，这些不影响其语义。但要注意：视觉上的“侧边”不等于逻辑上的“辅助”。若用户缩放字体或使用高对比度模式，aside 仍需保持与主内容的阅读流合理衔接。屏幕阅读器默认按 DOM 顺序朗读，所以把 aside 放在主内容之后，比强行用 CSS 移到前面更符合预期。

• 确保 aside 在 HTML 源码中靠近它所服务的内容
• 避免仅靠 position: absolute 将它“视觉移出”主流程，否则可能被辅助技术跳过
• 必要时可通过 aria-labelledby 显式关联 aside 与对应主段落

替代方案：什么情况下不该硬套 aside

不是所有侧边区域都该用 aside。当内容属于功能型组件（如筛选面板、广告位、实时聊天窗口），更适合用 section 加恰当 aria-role；若仅为装饰性留白或响应式占位，用 div 即可。语义化不是贴标签比赛，而是让结构真实反映内容意图。

• 广告区块 → section + role="complementary" 或 aria-label="广告"
• 分类筛选栏 → section + aria-labelledby="filter-heading"
• 纯视觉分隔线或空白间隙 → div，无需语义标签