用于标记旁注性信息，移除后主文仍逻辑完整；其语义范围取决于最近章节容器，css 控制布局，不可用于导航、头部等结构性内容。

用 <aside></aside> 标签制作补充内容区域，关键不是“放右边”，而是明确内容是否属于主流程的旁注性信息。它不负责视觉定位，只负责语义表达——告诉浏览器和读屏器：“这部分可以抽走，正文照样成立”。

什么时候该用 <aside></aside>

判断标准很简单：移除这块内容后，主文是否依然逻辑完整、信息自洽？如果是，就适合放进 <aside></aside>。

• 一篇教程文章旁的「小贴士」或「注意」框
• 新闻页里的「人物背景」或「事件时间线」
• 博客正文右侧的「作者简介」或「本文相关标签」
• 产品介绍页中非核心的「客户评价摘要」或「技术参数速览」

怎么嵌套才合规

<aside></aside> 的语义范围取决于它最近的章节容器（如 <article></article>、<section></section> 或 ）。位置不同，作用也不同：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 放在 <article></article> 内 → 补充仅针对这篇文章（例如某篇食谱旁的「食材替代建议」）
• 放在 直接子级 → 全站级补充（如首页右侧的「热门推荐」或「订阅入口」）
• 避免包裹主导航、logo、页脚版权——这些分别该用 <nav></nav>、<header></header>、<footer></footer>

CSS 布局由你自由控制

<aside></aside> 本身不规定显示在哪。你想让它靠右、固定、滑出，全靠 CSS 实现：

• 用 Flexbox：display: flex 在父容器上，再设 main 和 aside 的宽度与顺序
• 用 Grid：grid-template-columns: 1fr 300px 快速分栏
• 响应式处理：小屏下加 @media (max-width: 768px) { flex-direction: column; }，让它自然落到主内容下方
• 固定定位（如侧边导航抽屉）：需用 position: fixed 或 transform 动画，但此时更推荐用 <div class="drawer"> + JS 控制，因为 <code><aside></aside> 语义不匹配导航行为

  常见踩坑提醒

  以下情况别硬套 <aside></aside>：

  • 左侧垂直导航菜单 → 改用 <nav aria-label="主导航"></nav>
  • 页面顶部 logo 和搜索框 → 属于结构头部，用 <header></header>
  • 纯广告图或空占位符 → 没有语义价值，不用标签包装
  • 与当前内容完全无关的信息（比如在装修教程里塞股票行情）→ 破坏关联性，语义失效