HTML5允许多个aside标签，但每个必须依附明确父级上下文、语义独立：article内服务该文，section内补充该节，body直系子级则需全站相关并加aria-label标识。
可以使用多个 aside 标签，但关键不是“数量”，而是每个 aside 是否有明确归属、逻辑独立且彼此不混杂。HTML5 允许多个 aside，前提是它们各自依附于不同上下文，语义边界清晰。
每个 aside 必须有明确的父级上下文
浏览器和辅助技术靠父元素判断 aside 的作用范围。不能把几个无关内容硬塞进同一个 aside，也不能让多个 aside 悬空在 body 下却无区分依据。
- 放在
<article></article>内的aside：只服务于该文章，比如“本文作者简介”或“术语解释” - 放在
<section></section>内的aside：仅补充该小节，例如教程中某一步骤旁的“注意事项” - 放在
直接子级的aside：必须是全站级附属信息，如首页右栏的“今日编辑推荐”——它和整页主题相关，而非某一篇文章
用位置+语义标签组合区分不同用途
即使都在页面右侧，不同 aside 可通过嵌套位置和内部结构表明差异。例如：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
<article><aside><h3>作者说明</h3>...</aside></article>→ 文章专属 -
<section><h2>性能优化建议</h2> <aside><h4>兼容性提醒</h4>...</aside></section>→ 小节专属 -
<main>...</main><aside aria-label="全站热门资源">...</aside>→ 全局附属，加aria-label明确意图
避免“并列无主”的多个 aside
以下写法容易引发语义混乱，应避免：
立即学习“前端免费学习笔记（深入）”；
- 在
<main></main>外、下并排放两个aside，却不说明各自服务对象（如一个放广告、一个放友情链接，但都没上下文） - 把“天气预报”和“股票行情”塞进同一个页面级
aside—— 它们彼此无关，也不与主内容强相关，更适合拆成两个带aria-labelledby的div，或降级为普通容器 - 在
<header></header>或<footer></footer>内使用aside—— 违反规范，校验工具会警告
响应式与可访问性配套处理
多个 aside 在小屏下自然流式堆叠时，需确保阅读顺序合理：
- HTML 结构中，把更通用的（如全站侧边栏）放在
<main></main>后，文章内aside保留在对应<article></article>中——这样键盘导航和读屏器能按逻辑跳转 - 为每个
aside添加<h2></h2>、<h3></h3>或aria-label，避免屏幕阅读器只报“附注区域”而无法区分用途 - 用 CSS Grid/Flex 控制布局时，不改变 DOM 顺序，仅调整视觉呈现；禁用
float或position: absolute打乱语义流
