aside标签用于声明内容与主文的语义关系：附属、相关、可独立移除；它不自带布局样式，必须用css实现侧边栏效果；应嵌套在article内服务单篇内容，或与main并列于body下服务全站，禁放header/footer中。

aside 标签不是用来“划分视觉区域”的，而是用来声明内容与主文的语义关系：附属、相关、可独立移除。写完 aside 不等于侧边栏就出来了，它默认就是个普通块级元素，堆在正文下面。

aside 该放在哪一级结构里？看语义范围

嵌套位置直接决定它“为谁服务”：

• 放在 article 内部 → 只服务于这篇文章，比如文末的「作者简介」或段落旁的「术语解释」
• 和 main 并列、同为 body 的子元素 → 全站级辅助内容，比如右侧热门标签、广告位、社交链接
• 塞进 header 或 footer → 语义错位，读屏器可能忽略，SEO 权重被稀释
• 单独挂在 body 最外层但周围没 main 或 article → 孤立 aside，HTML5 规范不鼓励

为什么写了 aside 内容还在主文下面？

因为 aside 不带任何默认布局行为。浏览器不会自动把它右对齐、缩窄或浮动——这是 CSS 的事，不是标签的事。常见错误包括：

• 只写 aside，没给父容器加 display: flex 或 display: grid
• 用 float: right 但父容器没触发 BFC，导致塌陷、文字绕行
• 忘了设 width 或 max-width，小屏下撑破容器

推荐写法（父容器为 article）：

疯火轮AI

一款AI办公效率工具，主要用于营销人的AI工作台，适合需要提升相关任务效率的用户。

下载

article { display: flex; gap: 1.5rem; }<br>main { flex: 1; }<br>aside { width: 300px; }

什么内容坚决不能塞进 aside？

判断标准只有一个：删掉整个 aside 区块后，主内容是否依然逻辑完整、表意清晰？如果答案是否定的，就别用。

• 主导航菜单 → 该用 nav，不是附属，是核心路径
• 页脚版权信息 → 该用 footer，不是补充，是结构性终点
• “立即购买”按钮、客服浮窗 → 是功能入口，不是说明性旁注
• 全站广告横幅（无上下文关联）→ 用 section + aria-label="广告" 更合适

响应式与可访问性最容易漏掉的点

样式调通 ≠ 上线安全。以下三点常被跳过：

• 小屏断点没重置 display：@media (max-width: 768px) { article { flex-direction: column; } }
• aside 放在 DOM 前面但视觉靠右 → 键盘 Tab 顺序和视觉流不一致，用户先聚焦主内容再跳回顶部
• 里面全是链接却没说明用途 → 加 aria-label="推荐阅读" 或让 aria-labelledby 指向一个 h2

真正难的不是把内容“放右边”，而是让机器和人都能准确理解：“这段东西，为什么在这儿，又为什么可以不要它”。