aside 是语义标签，表示与主文附属、补充但非核心的内容，不负责布局；需用 css（如 flex/grid）实现视觉侧边效果，且须注意其在 article 内时仅限于该文语义范围。

aside 标签不是“侧边栏容器”，而是语义标记

很多人一看到 aside 就直接当 CSS 布局用，结果样式没加、语义却乱了。它不负责视觉位置，只表达内容与主文的关系：附属、补充、非核心但相关。浏览器不会自动把它放到右边，屏幕阅读器也不会因此读得更响——除非你用 CSS 显式定位。

典型误用：<aside class="sidebar"></aside> 却没给 class="sidebar" 写任何样式，导致内容堆在主文下方，还自以为“结构正确”。

• 适合放作者简介、相关链接、术语解释、引用来源等
• 不适合放导航菜单（该用 nav）、广告横幅（该用 section + 语义化说明）或登录表单（该用 form）
• 可出现在 article 内部（表示该文章的附属信息），也可在 body 级（表示整页的附属信息）

如何让 aside 真正“靠边”？靠 CSS，不是标签

HTML 不管布局，aside 默认是块级元素，和 p 或 div 一样垂直堆叠。要让它显示在右侧（或左侧），必须配合 CSS 定位或布局模型。

推荐用 display: flex 或 display: grid，避免过时的 float ——后者容易引发清除浮动问题，且响应式处理麻烦。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• Flex 布局示例：

  main { display: flex; gap: 2rem; }
  aside { flex: 0 0 280px; }

• Grid 布局示例：

  body { display: grid; grid-template-columns: 1fr 280px; gap: 2rem; }
  main { grid-column: 1; }
  aside { grid-column: 2; }

• 别忘了移动端：用 @media 把 aside 改成 display: block 并塞到主文下方，否则小屏会横向溢出

嵌套在 article 里的 aside 有特殊语义含义

如果 aside 在 article 内部，它就属于这篇文章的“附属内容”，比如某篇技术文章里的“兼容性备注”或“历史背景”。这时它的作用范围被限定，不能跨 article 被复用。

错误写法：<article><aside>全站最新公告</aside></article> —— 公告不属于这篇文章，语义错位。

• 正确场景：一篇讲 fetch() 的教程里，aside 里写“对比 XMLHttpRequest 的差异”
• 错误场景：把网站搜索框、全局用户头像放进 article > aside
• 注意：一个 article 可以有多个 aside，比如一个放引用，一个放术语解释

无障碍与 SEO 都依赖你写对上下文

屏幕阅读器会把 aside 的内容标记为“次要”，跳过或降权朗读；搜索引擎也会据此判断内容权重。如果你把关键操作按钮或主流程步骤塞进 aside，用户可能听不到，爬虫也可能忽略。

• 检查点：用浏览器开发者工具切换“无障碍树”，看 aside 是否被标记为 complementary 角色
• 避免在 aside 里放 h1 或主导航链接——这些该由 header 或 nav 承担
• 如果侧边栏内容其实是页面核心功能（如仪表盘的控制面板），别硬套 aside，用 section + aria-labelledby 更准确

真正难的不是写 <aside></aside>，而是判断这段内容到底算不算“附属”——这需要你读一遍文案，想清楚它和主文的逻辑关系，而不是看它最后出现在哪个视觉区域。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！