应使用 aside，它是唯一语义正确的标签，表示与主内容相关但可独立成块的补充信息；footer 用于页脚，语义不符且破坏文档结构。
旁注该用 aside 还是 footer？
旁注不是页脚，也不是侧边栏容器的通用占位符。aside 是唯一语义正确的标签，它表示与主内容相关但可独立成块的补充信息——比如术语解释、背景说明、引用来源或作者注释。用 footer 套旁注会破坏文档大纲结构，屏幕阅读器和搜索引擎都会误判内容层级。
-
aside必须嵌套在与其关联的article或section内部，否则语义断裂（例如不能直接放在body顶层） - 如果旁注跨多个章节生效，应复制到每个相关
section中，而不是靠 CSS 定位“全局浮动” - 不要用
div role="note"替代 —— ARIA 角色无法替代原生语义，且部分旧版读屏软件不识别role="note"
aside 里能放什么内容？
旁注内容必须保持“附属性”：它被移除后，主内容逻辑依然完整。常见合规用法包括术语简释、数据来源标注、历史背景短句、作者额外提醒；违规用法包括操作按钮、导航链接、广告位、全文摘要。
- 允许：
<aside><p>注：此处“响应式”指 CSS 媒体查询驱动的布局切换</p></aside> - 禁止：
<aside><button>导出PDF</button></aside>（交互控件不属于旁注范畴） - 慎用列表：纯描述性列表可以，但带编号步骤或操作指引的列表建议改用
section+h3
CSS 定位旁注时最常踩的坑
视觉上把旁注放到右侧或文末很常见，但样式实现方式直接影响可访问性和打印效果。绝对定位或浮动会让旁注脱离文档流，在屏幕阅读器中顺序错乱，打印时可能整个消失。
立即学习“前端免费学习笔记（深入）”；
- 优先用 CSS Grid 实现内联旁注：
display: grid; grid-template-columns: 1fr max-content;，确保 dom 顺序与视觉顺序一致 - 避免
position: absolute或Float—— 它们会让aside在键盘 Tab 顺序中跳脱，也影响 @media print 样式生效 - 如果必须右置，用
margin-left: auto配合 flex 容器，而非脱离流的方案
IE 和旧 safari 对 aside 的兼容处理
所有现代浏览器都原生支持 aside，但 IE8 及更早版本不认识这个标签，会导致默认 display 为 inline，且无法被 CSS 选中。不过，这和 html5 Shiv 的修复范围一致，无需单独 hack。
- 只需在
中引入 html5 Shiv：<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> - 不要给
aside加 class 来“模拟语义”，比如<div class="aside"> —— 这等于放弃语义，Shiv 也无法补救 <li>旧版 Safari（aside:focus 等伪类支持不稳定，建议用 JS 绑定 focus 效果而非纯 CSS</li> <p>旁注真正的难点不在标签选择，而在于判断“这段话到底算不算旁注”。很多人把所有非正文文字都往 <code>aside里塞，结果主次颠倒。只要问一句：删掉它，读者还能否理解上下文？答案是否定的，那就不是旁注。