HTML5允许多个aside标签，但每个必须依附明确父级上下文、语义独立：article内服务该文，section内补充该节，body直系子级则需全站相关并加aria-label标识。

可以使用多个 aside 标签，但关键不是“数量”，而是每个 aside 是否有明确归属、逻辑独立且彼此不混杂。HTML5 允许多个 aside，前提是它们各自依附于不同上下文，语义边界清晰。

每个 aside 必须有明确的父级上下文

浏览器和辅助技术靠父元素判断 aside 的作用范围。不能把几个无关内容硬塞进同一个 aside，也不能让多个 aside 悬空在 body 下却无区分依据。

• 放在
  内的 aside：只服务于该文章，比如“本文作者简介”或“术语解释”
• 放在
  内的 aside：仅补充该小节，例如教程中某一步骤旁的“注意事项”
• 放在 直接子级的 aside：必须是全站级附属信息，如首页右栏的“今日编辑推荐”——它和整页主题相关，而非某一篇文章

用位置+语义标签组合区分不同用途

即使都在页面右侧，不同 aside 可通过嵌套位置和内部结构表明差异。例如：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 作者说明

  ...
  → 文章专属

• 性能优化建议

  兼容性提醒

  ...
  → 小节专属
• ...
  ...
  → 全局附属，加 aria-label 明确意图

避免“并列无主”的多个 aside

以下写法容易引发语义混乱，应避免：

• 在
  外、 下并排放两个 aside，却不说明各自服务对象（如一个放广告、一个放友情链接，但都没上下文）
• 把“天气预报”和“股票行情”塞进同一个页面级 aside —— 它们彼此无关，也不与主内容强相关，更适合拆成两个带 aria-labelledby 的 div，或降级为普通容器
• 在
  或
  内使用 aside —— 违反规范，校验工具会警告

响应式与可访问性配套处理

多个 aside 在小屏下自然流式堆叠时，需确保阅读顺序合理：

• HTML 结构中，把更通用的（如全站侧边栏）放在
  后，文章内 aside 保留在对应
  中——这样键盘导航和读屏器能按逻辑跳转
• 为每个 aside 添加
  、
  或 aria-label，避免屏幕阅读器只报“附注区域”而无法区分用途
• 用 CSS Grid/Flex 控制布局时，不改变 DOM 顺序，仅调整视觉呈现；禁用 float 或 position: absolute 打乱语义流

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