并不等于语义化完成。浏览器和屏幕阅读器只认标签含义，不认视觉位置——

表示“与主内容相关但可独立存在”的附属信息，比如作者简介、参考资料、广告、相关链接。如果侧边栏里放的是导航菜单、站点 logo 或全局搜索框，它其实属于页面结构的一部分，更该用

、

或

。

判断要不要用 aside 的三个关键信号

出现以下任一情况，才适合用

：

• 内容在逻辑上可以被移除，主文章仍完整自洽（例如：一篇技术文档旁的「延伸阅读」列表）
• 内容是针对当前页面或某段内容的补充说明（例如：
  

  内一段代码示例旁的「兼容性提示」）

• 内容重复出现在多个页面且与上下文弱耦合（例如：右侧固定的「本周更新」公告，不依赖当前页面主题）

常见误用场景及修正方式

这些“侧边栏”不该用

：

• 左侧垂直导航菜单 → 改用


  ，并加 aria-label="主导航"

• 页脚上方的三列工具区（联系方式 / 快捷入口 / 订阅表单）→ 拆成多个
  

  ，用 heading 关联

• 文章页右侧的「作者卡片」→ 若卡片仅服务当前
  

  ，应放在

  内部，用

  ；若全站统一且与当前内容无关（如固定运营号），才考虑外层

实际重构时的 html 结构示例

假设原页面是博客文章页，右侧有「相关文章」和「标签云」两个区块，它们都围绕当前文章展开，但非核心内容：

立即学习“前端免费学习笔记（深入）”；

   
     
如何理解 css Containment
     
正文内容……
   
     

注意点：

• 


  必须包裹在

  内，与

  同级，表明它是整页的附属内容，而非文章内部插件

• 用 aria-labelledby 显式关联多个标题，提升读屏体验
• 避免在


  里塞

  —— 如果「相关文章」本质是导航，就该单独提一层

  ，而不是藏在

  里

语义化不是给标签贴标签，而是让每个元素在 dom 层面表达它真实承担的角色。aside 最容易被当成“视觉侧边栏”的快捷替换，但它真正关心的是内容关系，不是 CSS 的 Float 或 position: sticky。