是语义化标签,专用于版权信息、免责声明、脚注等次要但需保留的内容,不可仅作样式控制;滥用会损害可访问性、seo及语义结构。

<small></small> 不只是把字体变小,它有明确的语义含义:表示“附属细则、版权信息、法律免责声明、侧栏注释等次要内容”。
为什么不能只当样式标签用
浏览器默认用 font-size: smaller 渲染 <small></small>,但它的核心作用是传达语义——告诉辅助技术(如屏幕阅读器)、搜索引擎和开发者:“这段文字重要性较低,不是主内容”。
- 搜索引擎可能降低
<small></small>内文本的权重,影响 SEO - 某些无障碍工具会跳过或弱化朗读
<small></small>中的内容 - 用
<span style="font-size: 0.8em"></span>替代,语义完全丢失;用<small></small>却套大段正文,反而造成语义污染
哪些场景适合用 <small></small>
W3C 明确列出适用情形,不是“看着小就用”:
- 版权信息:
<p><small>© 2026 Example Corp. All rights reserved.</small></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> - 免责声明:
<small>本服务不保证数据实时性,使用风险自担。</small> - 表格脚注:
<td>¥199</td> <td><small>不含税</small></td> - 表单字段补充说明:
<label>邮箱</label><input type="email"><small>用于接收验证邮件</small>
容易被忽略的嵌套与样式限制
<small></small> 是**流内容元素**,可包含文本、<em></em>、<strong></strong> 等,但不能直接包块级元素(如 <p></p>、<div>)——否则 HTML 验证失败。
<ul>
<li>错误写法:<code><small></small><p>这是段落</p> → 解析时会被浏览器自动修正,语义断裂
<small>这是行内说明</small> 或用 <aside></aside> 包裹多段次要内容small { font-size: 1rem; } 会抹掉其语义暗示,建议仅在必要时局部覆盖真正难的是判断“是否属于次要内容”,而不是怎么让它变小。一个版权声明放在页脚用 <small></small> 很自然,但如果把它塞进产品介绍主文案中间,语义就反了。










