17370845950

aside是语义化的“附属内容”容器，表示与主内容相关但可独立存在的非核心信息；应依据内容逻辑关系而非视觉位置选用，删除后主内容须仍完整自洽。

aside 标签不是“侧边栏容器”，而是语义上的“附属内容”

很多人一看到 aside 就直接当 CSS 布局用的“侧边栏盒子”，这是最典型的误用。HTML5 规范明确说：aside 表示**与主内容相关但可独立存在、非核心的附属信息**，比如引用、术语解释、作者简介、相关链接列表、广告——但前提是它和当前页面/文章内容有逻辑关联。

如果只是单纯为了实现视觉上的右栏布局（比如固定宽度 + float / flex），用 div 更合适；强行套 aside 反而污染语义，影响可访问性（屏幕阅读器会读作“附属内容”）和 SEO。

什么场景下该用 aside？看内容关系，不看位置

判断是否该用 aside，只问一个问题：把它整个删掉，主内容是否依然完整、自洽、表意清晰？如果答案是“是”，那它大概率适合 aside。

• 一篇技术文章里嵌入一段
  引用某位专家对这个概念的评价 → 适合 aside
• 博客正文下方列出“本文作者的其他 3 篇相关文章” → 适合 aside（前提是这些文章确实主题强相关）
• 产品页右侧放一个“联系我们”的表单 → 不适合 aside（它是功能入口，不是附属说明）
• 全局导航栏或页脚版权信息 → 绝对不能用 aside（它们属于文档结构，该用 nav 或 footer）

aside 放哪？可以嵌套在 article 里，也可以在 body 顶层

aside 的作用域取决于它的父元素。它既可以作为整页的附属信息（如全站最新公告），也可以限定在某个 article 内部（如某篇文章的背景知识框）。

  
Web Components 入门
  
自定义元素、Shadow DOM……
  
    
术语小贴士
    
Shadow DOM：一种封装 DOM 和样式的机制……
  



站内公告
本周五下午系统维护 2 小时

注意：aside 在 article 内部时，会被理解为“这篇文章的附属内容”；放在 body 直接子级，则代表“整个页面的附属内容”。别把它塞进 header 或 main 里凑结构——没意义，还可能破坏语义层级。

样式和兼容性：它不自带样式，也不需要特殊 hack

aside 是纯语义标签，浏览器默认只给它 display: block，没有 margin/padding，更不会自动浮动到右边。你用 Flex/Grid 定位它，和用 div 没任何区别。

兼容性完全不是问题：IE9+、所有现代浏览器都支持。但要注意两点：

• 旧版辅助技术（如某些 IE + JAWS 组合）可能忽略语义，但这是小概率；主流读屏软件（NVDA、VoiceOver）都能正确识别 aside 并提示“complementary content”
• 别为了“看起来像侧边栏”而给 aside 加 role="complementary" —— 它本就隐含这个 role，重复声明反而可能干扰解析

真正容易被忽略的是：同一个页面中多个 aside 之间没有隐含关系。如果你放了两个，得靠 heading 层级（h2/h3）或 aria-labelledby 明确它们各自的用途，否则屏幕阅读器用户可能分不清哪个是“作者介绍”、哪个是“延伸阅读”。