aside 应紧邻相关主内容使用，仅用于语义上关联但非核心的旁支信息，如文章末尾作者简介、代码旁注意事项等；不可脱离上下文单独置于 body 外层或页脚。
aside 标签该用在什么位置
不是所有“看起来像侧边栏”的区域都该用 aside。它只适用于语义上与主内容相关但非核心的旁支信息，比如文章末尾的作者简介、同一主题下的推荐阅读、或某段代码旁的注意事项说明。如果只是为布局而设的空白容器，或者内容完全独立（如全站导航、广告横幅），aside 就不合适——此时应选 nav 或普通 div。
aside 不能脱离上下文单独存在
aside 是有语义依赖的标签，浏览器和读屏工具会把它理解为“对附近内容的补充”。所以它必须紧邻相关主内容，比如放在 article 内部、或跟在某段 section 后面。常见错误是把它丢在 body 最外层、或塞进页脚底部还标“相关链接”——这种用法会让语义断裂，SEO 和无障碍支持都会打折。
- ✅ 正确：
<article><h2>React Hooks 入门</h2><p>...</p><aside><h3>注意</h3><p>useEffect 第二个参数为空数组时……</p></aside></article> - ❌ 错误：
<body><aside><h3>热门标签</h3><ul>...</ul></aside></body>（无上下文锚点）
样式实现别只靠 float，flex 或 grid 更可控
用 float: right 推侧边栏的老办法，在现代项目里容易引发清除浮动、塌陷、响应式错位等问题。直接用 Flexbox 布局更稳妥：
.article-layout {
display: flex;
gap: 24px;
}
.article-layout > main {
flex: 1;
}
.article-layout > aside {
flex: 0 0 280px;
}
注意三点：
-
flex: 0 0 280px比width: 280px更安全，能防止内容撑破容器 - 移动端记得加
@media (max-width: 768px) { .article-layout { flex-direction: column; } } - 不要给
aside设position: absolute——这会让它脱离文档流，语义和可访问性全丢
响应式中 aside 的隐藏逻辑要谨慎
小屏下把 aside 设成 display: none 很常见，但得确认它真不重要。如果里面是关键提示、版权说明或法律声明，隐藏就等于删内容。更稳妥的做法是：
- 用
order把它挪到主内容下方（仍保留在 DOM 中） - 用
visibility: hidden+height: 0+overflow: hidden实现“视觉隐藏但语义保留” - 若必须移除，确保服务端或 JS 有 fallback 内容补位
语义标签的生命力不在视觉，而在结构是否诚实——aside 一旦被滥用或掩盖，就只剩一个空壳了。
