<small>仅用于语义上属于免责条款、版权归属、数据来源、时间戳等法律/责任边界类补充说明,删去后主内容仍完整合法可执行;其他情况应使用<span>或语义化class。

只在内容本身属于免责条款、版权信息、字段限制说明等附属细则时,才该用 <small>;它不是“小字开关”,滥用会破坏语义结构和可访问性。
什么时候必须用 <small> 而不是 <span> 或 CSS 类
当文字在语义上明确属于“法律/责任边界类补充说明”——即用户不读它不影响主流程操作,但读了能规避误解或权责风险时,<small> 才是正确选择。浏览器和屏幕阅读器会据此降低其权重,但不会跳过。
-
<small>* 本服务不适用于未满14周岁用户</small>—— 符合:明确免责边界 -
<small>数据来源:国家统计局2023年公报</small>—— 符合:归属说明,非主陈述 -
<small>更新于2026-04-25</small>—— 可接受:时间戳属弱细则,但需保持上下文紧凑 - ❌
<small>价格:¥99</small>—— 错误:价格是核心业务信息,不是细则 - ❌
<small>点击查看详情</small>—— 错误:这是交互提示,应归入<button>或带aria-label的<span>
<small> 嵌套无效,多级细则必须靠 CSS
HTML 规范明确规定:<small> 嵌套不会叠加缩放效果。第二层 <small> 和第一层渲染尺寸一致,视觉上毫无区别。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
- 错误写法:
<small>一级<small>二级</small></small>→ “一级”和“二级”字号相同 - 正确做法:为不同层级的细则定义语义化 class,如
class="disclaimer-level-1"和class="disclaimer-level-2",再用 CSS 控制font-size - 注意单位:优先用
rem(如0.875rem),避免px锁死用户系统缩放设置
默认字号不可靠,必须显式重置
各浏览器对 <small> 的 UA stylesheet 实现不统一:Chrome 默认 font-size: 80%,Firefox 是 83%,Safari 又略有差异。若设计系统要求严格一致(比如所有细则必须是 12px),就不能依赖默认行为。
立即学习“前端免费学习笔记(深入)”;
- 必须加全局重置:
small { font-size: 0.75rem; /* = 12px when root is 16px */ } - 如果项目根字体用了
62.5%(即 1rem = 10px),那对应值应为1.2rem - 不要用
<font size="1">—— HTML5 已废弃,无语义、不可维护、无障碍支持差
真正容易被忽略的点:每次用 <small> 都得反问一句
“这段话删掉,主内容是否依然完整、合法、可执行?” 如果答案是“是”,那它才配进 <small>。多数人卡在“看起来像细则”就直接套标签,结果把字段提示、操作引导、UI 辅助文案全塞进去——语义一塌糊涂,后续改版、做无障碍审计、甚至 SEO 优化都会踩坑。


















