标签语义上专用于旁注、版权信息等次要但有意义的文本，非字体缩放工具；滥用会损害无障碍访问与html5语义规范，正确场景如页脚版权、表格单位说明，错误场景如商品“含税”提示或按钮旁提示。
small 标签不是“缩小字体”的快捷方式
它语义上专用于旁注、版权信息、免责声明等次要但仍有意义的文本，不是 font-size 的替代品。滥用会导致无障碍访问问题（屏幕阅读器会弱化处理），也违背 HTML5 语义规范。
常见错误是写成：<small>价格含税</small> 放在商品标题旁——这会让辅助技术忽略其重要性，其实“含税”对用户决策很关键，应改用 <span></span> + CSS 控制样式。
- 正确场景：页脚版权年份
<small>© 2024 Company Inc.</small> - 正确场景：表格中单位说明
<small>(单位：万元)</small> - 错误场景：按钮旁的“仅限新用户”提示（应使用
<span class="hint"></span>）
浏览器默认样式和可访问性影响
small 在所有主流浏览器中默认渲染为约 80% 的父元素字号，但这不是固定值，而是相对缩放；更重要的是，部分屏幕阅读器会降低其语音语速或音量，暗示内容优先级低。
如果你真需要视觉变小但语义不降级（比如数学公式中的下标说明），别用 small，而用：
<span style="font-size: 0.8em;" aria-label="此处为补充说明">补充说明</span>
- 避免依赖
small实现排版效果，CSS 的font-size或transform: scale()更可控 - 若必须用
small，确保其内容确实是非核心、可省略而不影响主信息理解 - 检查 VoiceOver/NVDA 是否把该文本读得过快或跳过——这是语义误用的直接信号
与其它内联语义标签的边界容易混淆
small 和 aside、footer、figcaption 都涉及“附属内容”，但层级和范围不同：small 是行内级、紧贴某段文字；aside 是块级、可包含多段；figcaption 仅用于 <figure></figure> 内部。
- 产品参数表末尾写“数据截至 2024-06” → 用
<small></small>（行内附注） - 整块“相关阅读”栏 → 用
<aside></aside>（独立侧边内容） - 图片下方说明文字 → 必须用
<figcaption></figcaption>，不能用small - 页面底部联系信息 → 应放在
<footer></footer>内，而非一堆<small></small>
现代框架里用 small 要小心 SSR 和 hydration 差异
React/Vue 中直接写 <small>...</small> 没问题，但若通过 JS 动态插入（比如从 API 加载附注），需注意服务端渲染时是否已存在语义结构。如果 SSR 输出不含 small，而客户端 JS 补上，可能造成语义突变（辅助技术两次读取不一致）。
- 始终让附注文本随主内容一起 SSR，不要延迟注入
- 避免用
v-if或{condition && <small>...}</small>控制显示/隐藏——这会让 DOM 结构不稳定 - 如需条件渲染，用 CSS
visibility: hidden或aria-hidden替代移除节点
small 才是合理选择；不能——那就不是附注，不该用它。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
