应仅在内容具有明确下标或上标语义时使用sub和sup，如化学式H₂O、数学式x²、脚注编号等；纯样式需求须用CSS实现，以保障语义、可访问性与结构化数据提取。

sub 和 sup 是 HTML5 中专用于语义化标注下标与上标的内联元素，它们不仅影响视觉呈现，还传递数学、化学或语言学中的结构含义。

什么时候该用 sub 和 sup？

当内容本身具有明确的下标或上标语义时才应使用，例如：

• 化学式：H₂O、CO₂
• 数学表达式：x² + y² = z²
• 脚注编号：参见文献¹
• 语言学音标或变音符号（需配合其他标准）

避免仅为了“看起来小一点”或“位置偏上/下”而滥用——那属于样式问题，应交由 CSS 处理。

默认样式与浏览器行为

所有现代浏览器对 sub 和 sup 都有内置默认样式：

• sub：字体略小（约 83%），垂直向下偏移（baseline 下移）
• sup：字体略小（约 83%），垂直向上偏移（baseline 上移）
• 两者都保持行高稳定，不会撑开段落间距

这些表现是可继承的，也可被 CSS 覆盖（如 font-size、vertical-align），但语义不变。

与纯 CSS 实现的区别

仅用 span 加 CSS（如 vertical-align: sub; font-size: 75%）能模拟外观，但缺少语义信息：

• 屏幕阅读器无法识别其数学/化学含义，可能朗读为普通文字
• 搜索引擎和知识图谱难以提取结构化数据（如化合物名称）
• 无障碍访问支持弱，尤其对依赖语义导航的用户

因此，语义正确优先；样式微调其次。必要时可在 sub/sup 上叠加 CSS 增强可读性（如调整字号比例或对齐精度）。

注意事项与常见误区

使用时需注意几点实际限制：

• 只适用于短文本（单个字符或简短符号），不推荐包裹段落或复杂结构
• 嵌套使用（如 _A^B）虽合法，但易导致可读性与渲染混乱，应避免
• 在表格单元格或行内公式中，注意与其他内联元素（如 var、mark）的组合顺序
• 旧版 IE 对 sub/sup 支持良好，无需额外 polyfill

语义清晰、简洁使用，就能兼顾表现力与可访问性。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！