aside是语义标签，表示与主文相关但可独立存在的补充内容，非视觉侧边栏容器；其使用需满足相关性、逻辑独立性、自身表达完整性三标准。
aside 标签不是“侧边栏容器”，而是语义标记
很多人一看到 aside 就默认它是用来写 CSS 浮动侧边栏的，这是最典型的误解。它本身不带任何样式，也不强制出现在右侧——浏览器默认只设了 display: block，和 div 一样“平平无奇”。它的核心价值在语义：告诉解析器（浏览器、读屏器、搜索引擎）“这部分内容与主文相关，但可独立存在”。
这意味着：
- 用
float: right或position: sticky实现视觉侧边栏，和是否用aside是两件事；你可以用div做出一模一样的布局，但会丢失语义 - 搜索引擎可能弱化
aside内容的权重，因为它被明确定义为“非主干”；反过来，滥用aside包裹关键导航或正文摘要，反而干扰理解 - 无障碍工具（如屏幕阅读器）可能跳过
aside或提示“补充内容”，用户可选择性收听
什么内容该放进 aside？看三个硬标准
判断能不能用 aside，不看位置，而看内容是否同时满足以下三点：
- 与主文主题相关（比如一篇讲 React 的文章，
aside里放 Vue 对比表格可以；放天气预报就不行） - 抽离后不影响主文逻辑完整性（删掉整个
aside，正文仍能自洽、传达完整意思） - 自身有独立表达价值（比如一段历史人物引言、作者简介、相关术语解释，哪怕脱离上下文也能被理解）
常见合规用例：aside 里放“本文作者：张三｜2024 年前端工程师｜GitHub：@zhangsan”；或博客正文中嵌一个 aside 引用 Linus 关于 Git 的原话；或电商商品页中用 aside 展示“同类热销榜”。
反例：aside 里塞主导航菜单（该用 nav）、塞面包屑（该用 nav + aria-label="breadcrumb"）、塞登录表单（该用 section 或普通 div）。
嵌套 aside 和与其他语义标签混用的边界
aside 允许嵌套，但必须保持语义递进。比如主文章用一个 aside 放“延伸阅读”，其中某条推荐文章自己又带作者引言，那这条引言就可以再包一层 aside —— 因为它是“延伸阅读里的延伸信息”。
但要注意冲突场景：
- 不要把
aside当成section用：如果一块内容是正文的自然分段（比如“安装步骤”“配置说明”“故障排查”），该用section，不是aside - 不要和
article套错层：一个独立完整的博客评论，应是article；若你把它放在主文章的右侧作为“精选评论”，才适合用aside包一层 -
aside内可合法包含nav（如侧边栏里的“相关分类导航”），但不能反过来让nav包aside
CSS 布局时 aside 的实际处理要点
视觉上想让它靠右、固定、窄栏，得靠 CSS，但几个细节容易翻车：
- 响应式断点里记得重置
aside的float或position：小屏下强行右置会导致内容被切掉或重叠，通常应设为width: 100%+order调序（配合 Flex） - 避免对
aside直接设height: 100vh：它高度由内容撑开，设死高容易留白或截断；真要等高，用display: flex父容器 +align-items: stretch - 如果用
position: sticky，注意触发条件：父容器需有明确高度（如max-height: 80vh），否则 sticky 不生效
最简健壮写法示例：
<main><p>主文章内容……</p> </main><aside><p>作者简介与联系方式</p> </aside>
配合 CSS：
main, aside { flex: 1; }
@media (min-width: 768px) {
body { display: flex; }
aside { width: 30%; }
}
真正难的从来不是怎么写出来，而是每次敲下 <aside></aside> 时，多问一句：这段内容，删掉后读者还能懂全文吗？如果答案是否定的，那就该换标签了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
