aside 是纯语义标签，表示与主内容相关但可独立删除而不影响主逻辑自洽的内容；其视觉呈现（如是否靠右）完全由 css 控制，与标签本身无关；错误使用（如放导航、广告）会损害无障碍访问和 seo。
不是。 aside 标签根本不是为“做侧边栏”而设计的，它只负责表达一种语义关系：内容与主文相关，但可独立存在、删掉也不影响主逻辑自洽。视觉上放哪、叫不叫“侧边栏”，完全由 CSS 决定，和 aside 无关。
aside 里该放什么？只看删掉后主文还成不成
判断是否该用 aside，唯一可靠的操作是手动删掉整块 HTML，再通读主内容——是否依然表意完整、逻辑连贯？
- ✅ 适合：
aside包裹某篇 Vue 教程里的「setup()函数演变时间线」、「Composition API 与 Options API 对比速查表」 - ✅ 合规：
aside嵌在article内，展示「本文作者的 GitHub 主页链接」或「该技术栈的浏览器兼容性摘要」 - ❌ 错误：把全站顶部导航栏塞进
aside—— 删掉它，用户根本找不到其他页面 - ❌ 高风险：将广告位放在
aside中，尤其当广告含合规声明（如“广告”字样）时，会被辅助技术默认跳过或降权
为什么写了 aside 却没“靠右显示”？
因为 aside 是纯语义标签，浏览器对它的默认渲染就是 display: block，和 div 完全一样，不浮动、不设宽、不定位。
- 必须写 CSS 才能改变布局：比如父容器设
display: flex，aside设width: 280px，主内容设flex: 1 - 用
float: right要小心父容器塌陷，得加overflow: hidden或伪元素清除 - 响应式下别硬撑“右侧”：小屏时建议用
@media (max-width: 768px)改为flex-direction: column，让aside自然流到主内容下方
哪些替代方案比乱用 aside 更合适？
当内容不符合“附属但可删”标准时，强行套 aside 反而埋雷——语义错位比样式错位更难修复，后期无障碍适配或 SEO 优化往往要重写整页结构。
- 工具栏（筛选器、导出按钮）→
<div class="toolbar" role="region" aria-label="文档操作工具"> <li>正文嵌入的推广卡片 → <code><div role="complementary" aria-label="推荐产品"> <li>页头横幅广告 → <code><section aria-label="广告展示区"></section> - 全局导航 → 必须用
nav，不是aside的替代选项
最容易被忽略的一点：DOM 顺序和视觉顺序不一致时，键盘 Tab 流会按 HTML 顺序走，不是按 CSS 位置走。如果 aside 在源码中写在 main 前面，却靠 CSS 浮到右边，用户用键盘浏览就会先聚焦侧边栏再跳回主文——这种割裂感无法靠改样式消除，只能靠调整 HTML 结构本身。
