aside标签是语义化声明附属内容的HTML元素，表示与主文相关但不参与主线逻辑，删除后主文仍自洽，其嵌套位置决定服务范围，区别于div在于向机器明确传递可解释的语义。

aside 标签不是“靠右显示的盒子”，而是对内容关系的一次明确声明：它和主文有关联，但不参与主线表达。

逻辑联系：相关但不参与论证

一段内容能否放进 aside，关键看它是否服务于当前上下文的主题，却不承担推进主干逻辑的任务。比如：

• 一篇讲“CSS Containment”的技术文章，文末放一个表格对比 contain 属性各值的效果——这是相关、可独立、不破坏正文连贯性的，适合用 aside
• 同一文章里插入一行“点击查看本站所有性能优化指南”——若该链接列表与本文无具体语义绑定（比如没提过其中任何一篇），就属于泛导流，不算逻辑关联
• 食谱步骤中紧挨着某一步骤的“小贴士：黄油需提前软化”——这句直接支撑操作理解，删掉会导致步骤模糊，应属主文，不能放 aside

语义界限：抽离后主文仍成立

判断是否越界，最直接的办法是 mentally 删除整个 aside 元素：

• 删掉后，标题、段落、代码块、结论依然能自圆其说？→ 符合 aside 条件
• 删掉后，读者看不懂某个术语、不知道数据来源、误判作者立场？→ 它实际是主文的必要组成部分，应融入正文或改用 section/figure 等更贴切标签
• 删掉后，页面只剩空白区块或孤立链接？→ 内容本身不完整，违背 aside 的“自身表达完整性”要求

嵌套位置决定语义范围

aside 放在哪，决定了它“为谁服务”：

• 嵌在 article 内部 → 只对该篇文章负责，如“本文作者简介”“本节参考文献”
• 作为 body 的直接子元素，与 main 并列 → 表示全站级辅助信息，如右侧工具栏、实时在线客服入口（需确保内容确实跨页面通用）
• 塞进 header、footer 或 nav 里 → 语义错位，读屏器可能忽略，搜索引擎难以归类

和 div 的本质区别在于“可解释性”

用 div 也能做出一模一样的视觉效果，但机器无法分辨它是广告、导航还是补充说明。aside 则主动告诉解析器：

• 这不是导航（那是 nav 的职责）
• 这不是页脚信息（那是 footer 的领域）
• 这是与旁边内容有关、但允许跳过的附属材料

这种声明让屏幕阅读器可以提示“补充内容”，搜索引擎会适当降低其权重，协作开发者一眼明白结构意图。