aside是HTML5中唯一专为“与主内容相关但非核心”设计的语义标签，表示可移除而不影响主体完整性的附属信息，如延伸阅读、作者简介等；它不提供样式，布局须由CSS实现，且嵌套位置决定语义范围。
用 aside 标签包裹辅助信息最直接
HTML 中唯一专为“与主内容相关但非核心”的信息设计的语义标签就是 aside。它不是装饰性容器，而是明确告诉浏览器、搜索引擎和屏幕阅读器：“这部分可以被跳过，不影响理解主体”。比如相关文章推荐、作者简介、广告位、侧边导航、引用说明——只要删掉它，主内容依然完整自洽，就适合放进去。
常见错误是把它当“侧边栏样式容器”用：在 CSS 里写 .sidebar { float: right; }，然后套个 <div class="sidebar">。这完全丢失语义，辅助技术无法识别，SEO 也收不到信号。
-
aside可以出现在main内部（如文章末尾的“延伸阅读”），也可以在body级别（如全站右侧通栏推荐） - 不要嵌套在
table或ul里——HTML 无效，部分读屏工具会直接跳过整个节点 - 如果内容只是视觉上靠边、逻辑上却和当前段落强绑定（比如一段代码旁的解释），优先考虑用
figure+figcaption，而不是aside
aside 里该放什么？看它能不能独立存在
判断一个内容块是否该进 aside，关键不是位置，而是语义独立性。例如：
- ✅ 一篇博客正文旁的“作者 Twitter 账号”——移除后，文章仍可读、可分享、可被 RSS 抓取
- ✅ 新闻页底部的“相关新闻”列表——每条都是独立
article，且和当前新闻主题相关但非必需 - ❌ 产品详情页中“规格参数表”的说明文字——它和表格是一体的，应放在
table的caption或紧邻的p里 - ❌ 页面顶部 banner 上的促销倒计时——它属于页面全局上下文，更适合放在
header里
别把 aside 当成 div 的语义马甲
很多人给 div 加个 role="complementary" 就以为等价于 aside，其实不行。ARIA role 是补救手段，不能替代原生语义。浏览器对 aside 有内置的可访问性处理逻辑（比如 NVDA 的 Shift+Insert+A 快捷键能直接定位），而 role="complementary" 依赖开发者手动维护关联，稍有疏漏就失效。
立即学习“前端免费学习笔记（深入）”；
更隐蔽的坑是嵌套滥用：aside 里面再套一层 section，结果 section 没带 h2–h6 标题——这会让屏幕阅读器的大纲（outline）断裂，用户按 H 键跳标题时直接跳空。
- 每个
section必须有且仅有一个显式标题（h2–h6），不能靠 CSS 视觉隐藏或 JS 动态插入 -
aside自身不参与标题层级，它里面的标题只服务于其内部结构，不会出现在页面主大纲里 - 如果辅助信息需要强调时效性（如“今日推荐”），用
time标签标注时间，别只写“8月25日”这种纯文本
和 main、article 的边界最容易模糊
真正难的是判断“到底算不算辅助”。比如技术文档里的“注意事项”框、API 页面的“请求示例”——它们看起来像补充，实则对理解主流程至关重要。这种不能放进 aside，应该作为 main 的子元素，用 section 或带 h3 的 div 组织。
另一个典型混淆点是评论区。如果是某篇文章下的用户留言，它是该 article 的有机组成部分，应放在 article 内部；但如果是一个通用“热门评论聚合页”，那它本身就是独立内容单元，该用 main 包裹，而不是塞进某个 aside。
最常被忽略的一点：多个 aside 出现在同一页面时，必须确保它们彼此语义不重叠。比如左侧放“相关链接”，右侧放“广告”，中间再插一个“编辑推荐”——三个 aside 都合法，但若都标了 aria-label="推荐"，读屏工具就分不清哪个是哪个了。
