脚注应靠近正文引用点并用语义化结构实现，侧边注解宜用<aside>独立呈现；脚注区域推荐<footer role="doc-endnotes">，需aria-labelledby关联上标；避免div模拟脚注，须用sup与ol/li加返回链接；text-indent与margin配合优化段落呼吸感；响应式下aside需降级为后置说明并确保锚点准确定位。

用 <aside> 和 <footer> 区分脚注与侧边注解

脚注和侧边注解语义不同：脚注是补充说明，应靠近正文引用点；侧边注解（如术语解释、背景延伸）更适合用 <aside> 独立呈现。浏览器默认不渲染 <aside> 为侧栏，需配合 CSS 定位或响应式布局实现视觉分离。而脚注区域若放在页面底部，推荐用 <footer role="doc-endnotes">，并加 aria-labelledby 关联上标，否则屏幕阅读器可能跳过。

避免用 <div> 模拟脚注，优先使用语义化链接结构

常见错误是写 <div class="footnote">... 然后靠 JS 绑定点击事件——这破坏可访问性，且无 SEO 价值。正确做法是：

• 正文中用 <sup id="fn1">1</sup> 标记引用点
• 脚注容器内用 <ol><li id="fn-1">...<a href="#fn1">↩</a></li></ol>
• 确保每个 id 唯一，且 href 与目标 id 严格匹配（注意 fn1 vs fn-1）
• 不要省略返回链接，否则键盘用户无法回退

text-indent 和 margin 配合 <p> 控制长文本呼吸感

脚注和侧边注解常被塞进窄列，此时段落缩进和间距更关键：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 主文段落用 text-indent: 2em + margin: 1.4em 0，避免首行缩进与段间距冲突
• 脚注条目用 margin-bottom: 0.8em，比正文紧凑但保持可读性
• 侧边注解的 <aside> 内部段落建议取消首行缩进（text-indent: 0），改用 padding-left 或边框视觉区隔
• 所有段落统一设置 line-height: 1.6，防止小字号脚注文字挤成一团

响应式下侧边注解易失效，必须设降级方案

在移动端，<aside> 很可能被压到主文下方，若没提前声明 fallback 行为，用户会找不到注解。不能只靠 CSS float 或 position: sticky：

立即学习“前端免费学习笔记（深入）”；

• 用媒体查询将 <aside> 设为 display: block 并加 margin-top: 1.5em，明确它在小屏就是“后置说明”
• 给侧边注解标题加 <h3 class="aside-title">，方便用户快速识别上下文
• 避免在 <aside> 里嵌套复杂表格或浮动元素——它们在窄屏中极易错位或溢出
• 测试时重点看 iOS Safari 和 Android Chrome 下锚点跳转是否仍准确定位到脚注项

脚注编号一致性、侧边注解的 DOM 位置、以及小屏下跳转锚点偏移，这三处最容易被忽略。尤其当脚注内容含 <pre> 或图片时，高度计算偏差会导致滚动定位不准。