aside 标签用于定义与主内容关联但可独立存在的补充性内容，如侧边栏、作者简介、背景资料等；移除后不影响主内容完整性，语义上强调旁注性而非位置。
aside 标签在 HTML5 中用于定义与页面主要内容相关但可独立存在的附属内容，最典型的应用就是侧边栏（sidebar），但它不局限于“视觉上的侧边”——关键在于语义：它表示的内容是补充性的、旁注式的，而非主流程的一部分。
aside 的核心语义：关联但非必需
浏览器和屏幕阅读器会将 aside 视为一个独立的语义区块。它应与最近的祖先章节（如 article、section 或 body）存在逻辑关联，但移除后不影响主内容的完整性。
- 放在 article 内：表示仅对该文章相关的补充（如作者简介、延伸阅读链接、术语解释）
- 放在 body 级别：通常作为全站侧边栏（如导航分类、热门文章、广告位）
- 不推荐包裹主导航或页脚信息——那些更适合用 nav 或 footer
常见且合规的使用场景
符合 HTML5 规范的 aside 用法包括：
- 博客文章右侧的“本文作者”卡片或“相关标签”列表
- 新闻页面中嵌入的背景资料框（如“事件时间线”“人物简介”）
- 教程页面旁的“小贴士”“注意”“拓展阅读”提示块
- 产品页中的“客户评价摘要”或“技术参数速览”（前提是它们不是主卖点核心描述）
样式与布局：语义优先，CSS 自由控制
aside 本身不强制横向排列。是否显示为侧边栏，完全由 CSS 决定：
- 可用 float、flexbox 或 grid 将其置于主内容旁
- 响应式设计中，它可在小屏下自然流至主内容下方（无需改变 HTML 结构）
- 避免仅靠位置判断是否该用 aside——先问：“这段内容抽走后，主文还能自洽吗？”
容易误用的情况
以下情况不应使用 aside：
- 主导航菜单（应使用 nav）
- 页脚版权信息（应使用 footer）
- 纯装饰性图片或空占位符
- 与当前上下文完全无关的内容（例如在一篇食谱里放天气预报——除非该食谱明确按“晴天特供”分类）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
