标签不能直接替代视觉侧边栏,它专指与主内容相关但可独立存在的附属信息;若侧边栏含导航、logo等结构性内容,应改用、等更准确的语义化标签。

aside 标签不是“侧边栏”的万能替代
直接用
替换
并不等于语义化完成。浏览器和屏幕阅读器只认标签含义,不认视觉位置——
表示“与主内容相关但可独立存在”的附属信息,比如作者简介、参考资料、广告、相关链接。如果侧边栏里放的是导航菜单、站点 logo 或全局搜索框,它其实属于页面结构的一部分,更该用
、
或
。
判断要不要用 aside 的三个关键信号
出现以下任一情况,才适合用
:
- 内容在逻辑上可以被移除,主文章仍完整自洽(例如:一篇技术文档旁的「延伸阅读」列表)
- 内容是针对当前页面或某段内容的补充说明(例如:
内一段代码示例旁的「兼容性提示」)
- 内容重复出现在多个页面且与上下文弱耦合(例如:右侧固定的「本周更新」公告,不依赖当前页面主题)
常见误用场景及修正方式
这些“侧边栏”不该用
:
- 左侧垂直导航菜单 → 改用
,并加
aria-label="主导航" - 页脚上方的三列工具区(联系方式 / 快捷入口 / 订阅表单)→ 拆成多个
,用 heading 关联
- 文章页右侧的「作者卡片」→ 若卡片仅服务当前
,应放在
内部,用;若全站统一且与当前内容无关(如固定运营号),才考虑外层
实际重构时的 html 结构示例
假设原页面是博客文章页,右侧有「相关文章」和「标签云」两个区块,它们都围绕当前文章展开,但非核心内容:
立即学习“前端免费学习笔记(深入)”;
如何理解 css Containment
正文内容……
注意点:
-
必须包裹在
内,与同级,表明它是整页的附属内容,而非文章内部插件 - 用
aria-labelledby显式关联多个标题,提升读屏体验 - 避免在
里塞
—— 如果「相关文章」本质是导航,就该单独提一层,而不是藏在里
语义化不是给标签贴标签,而是让每个元素在 dom 层面表达它真实承担的角色。aside 最容易被当成“视觉侧边栏”的快捷替换,但它真正关心的是内容关系,不是 CSS 的 Float 或 position: sticky。