专用于与主内容相关但可独立存在的补充信息，如术语解释、兼容性提醒；不可用于纯装饰、广告或导航，其语义强调“离题但有益”，区别于表示主内容分段的 。

旁白和补充说明该用

而不是

或

旁白、补充说明这类内容，本质是「与主内容相关但可独立存在、非核心流程的一部分」，<aside></aside> 就是为它设计的。它不参与主内容流，但又不是完全无关（比如广告或友情链接），而是像文章边栏里的术语解释、作者背景、引用来源、延伸阅读提示——这些都属于 <aside></aside> 的典型场景。

常见误用是用 <section></section> 包裹侧边推荐，或直接套 <div class="sidebar">。前者会让屏幕阅读器误判为一个新章节，后者则彻底丢失语义。<ul> <li> <code><aside></aside> 可以出现在 <main></main> 内部（如博客正文旁的作者简介），也可以放在 <article></article> 里（如技术文章旁的兼容性提醒）

它不要求必须有标题，但如果有，建议用 <h2></h2>~<h6></h6>，且标题应反映其补充性质（例如“兼容性说明”“参考资料”）

不能用于纯装饰性内容（如背景图容器）、纯广告位（无上下文关联）、或分页导航（那是 <nav></nav> 的职责）

在 SEO 中，<aside></aside> 内容权重低于 <main></main> 和 <article></article>，但比 <div> 更易被结构化提取<h3> <code><aside></aside> 和 <section></section> 的关键区别在哪

判断依据不是位置（左/右/上/下），而是逻辑关系：<section></section> 是主内容流的延续，必须有明确主题并配标题；<aside></aside> 是主内容流的“离题但有益”的旁支。

举例：

<article><h1>CSS Grid 布局入门</h1>
  <p>Grid 是二维布局系统……</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
														src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
													<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
  <aside><h3>兼容性提醒</h3>
    <p>IE10+ 需加 -ms- 前缀，Safari 早期版本需 -webkit-</p>
  </aside><p>接下来我们看如何定义网格线……</p>
</article>

这里 <aside></aside> 不打断阅读流，但提供即时参考；若换成 <section></section>，辅助技术会把它当作一个新节，用户可能误以为要跳转到新主题。

哪些情况看似像旁白，其实不该用 <aside></aside>

容易踩坑的是把「视觉上靠边」等同于「语义上为旁白」。以下情况请直接用 <div> 或其他更准确标签：<ul> <li>页脚里的备案号、联系方式（用 <code><footer></footer>，不是 <aside></aside>）

轮播图下方的图片说明文字（属于 <figure></figure> + <figcaption></figcaption>）

文章末尾的“猜你喜欢”推荐列表（无上下文强关联，属推广位，用 <div> 更稳妥）<li>面包屑导航（是导航路径，归 <code><nav></nav>，哪怕它显示在顶部下方）

真正难判断的点在于：补充信息是否与当前 <article></article> 或 <section></section> 构成解释/对照/佐证关系。如果不是，就别硬塞 <aside></aside>。