HTML5 中的 <sub> 与 <sup> 是两个专门用来表示下标和上标的文本级语义标签。<sub> 代表下标，通常用于化学分子式、变量编号等；<sup> 代表上标，常见于数学幂、脚注引用以及序数词缩写。它们并不是单纯为了缩小字号或移动位置而存在，而是向浏览器、搜索引擎和辅助技术传达这段文字所属的语义角色。理解这一点，是正确使用它们的基础。
一、基础语法与浏览器默认表现
<sub> 标签用于定义下标文本，<sup> 标签用于定义上标文本。它们都属于 HTML5 中的短语内容模型，可以出现在段落、标题、表格单元格等文本环境中。基本语法非常直观，开始标签和结束标签之间的内容会自动被浏览器识别为下标或上标。例如化学式 H₂O 中，数字 2 应该放在 <sub> 内部，而数学表达式 2³ 中的指数 3 应该放在 <sup> 内部。这里需要注意的是，H₂O 是 Unicode 字符，并非所有场景都有对应的上下标字符，因此使用标签是更通用的方案。
浏览器对 <sub> 和 <sup> 的默认渲染通常是将字体缩小到父元素字号的大约 75% 至 80%，同时调整文本基线。<sub> 会把内容稍微往下偏移，<sup> 会把内容往上偏移。不同的浏览器在具体偏移量和字号比例上可能存在差异，但整体效果相似。这种默认行为虽然足够简单，却可能引发一个常见问题：上下标元素撑大了所在行的行高，导致整段文字的行间距看起来不一致。尤其是当一行中同时出现多个上下标，或者上下标出现在行首、行尾时，排版上的突兀感会更明显。
下面是一段最基本的 HTML 代码，展示了如何标记水的化学式和幂运算：
<p>水的化学式：H<sub>2</sub>O</p> <p>2 的 3 次方：2<sup>3</sup> = 8</p>
这段代码在浏览器中会显示为正常大小的文字，其中数字 2 和 3 会被渲染为较小的下标或上标。它清楚地反映了语义标签的价值：即使不添加任何 CSS，浏览器也能自动处理位置和大小。但如果你希望保持页面整体行高不受影响，就需要进一步了解默认样式背后的计算方式，并针对性地重置某些属性。
二、典型应用场景与语义边界
从实际开发来看，<sub> 最常见的用途集中在化学领域。除了水的分子式，像二氧化碳 CO<sub>2</sub>、硫酸 H<sub>2</sub>SO<sub>4</sub> 等都需要准确标记原子数量。类似地，数学中的变量编号，例如 a<sub>1</sub>、a<sub>2</sub>，也适合使用下标来表示。<sup> 则在数学幂表达式中不可或缺，例如 x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup> 可以完整描述勾股定理的形式。除了数学和化学，脚注编号、参考文献标注、版权声明中的商标符号位置等，也常常借助上标来实现。
组合上下标是另一个值得注意的场景。典型代表是硫酸根离子 SO<sub>4</sub><sup>2-</sup>，其中 4 是下标，2- 是上标，两者紧挨在一起。直接在 HTML 中将 <sub> 和 <sup> 前后相邻书写，可以实现基本的效果，但默认情况下两者的底部和顶部基线并不一定完全对齐，特别是在字体较小的正文中，可能会出现上下标高低不一致或水平间距不协调的情况。这类问题通常需要通过 CSS 微调解决，后文会给出具体方案。
不过，并不是所有缩小或偏移的文字都适合使用 <sub> 或 <sup>。如果只是出于视觉设计需要，想将一段文字缩小并改变位置，而这段文字并没有下标或上标的语义，那就应该使用 CSS 的 font-size、vertical-align 等属性来处理。换句话说，<sub> 和 <sup> 是语义标签，不能用它们来替代纯样式效果。一旦滥用，反而可能让屏幕阅读器和其他辅助技术产生误解，把装饰性文本当成有实际语义的上下标。
三、常见疑问：行高、对齐与字号调整
不少开发者在第一次使用 <sub> 或 <sup> 时会发现，加入上下标后整段文字的行距好像变大了。这个现象的原因是浏览器默认给上下标元素设置了 vertical-align 属性，并且该属性可能使行框的高度增加。解决思路通常是在全局样式中给 <sub> 和 <sup> 设置 line-height: 0，同时使用相对定位来手动控制偏移量。下面是一个常见的基础重置样式：
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
这段 CSS 把 line-height 设为 0，是为了防止上下标元素继承父级的行高之后撑高整行。通过 position: relative 配合 top 或 bottom，可以更精确地控制偏移距离。偏移量使用 em 作为单位，而不是像素，这样无论父元素字号如何变化，上下标的高度和位置都能保持相同的比例。如果页面中某些区域使用了更大的字号，例如标题或强调文本，使用相对单位会明显减少二次调整的工作量。
当上下标连续出现时，例如 SO<sub>4</sub><sup>2-</sup>，仅靠上面的基础样式可能还是会出现水平间距偏大或垂直方向不对齐的问题。可以通过为相邻的 <sub> 和 <sup> 添加一个小的负外边距来收紧间距，或者使用 CSS 的 display: inline-flex 让它们作为一个整体参与行内布局。但需要注意，过于复杂的定位可能会影响文本复制、选择和搜索的准确性，因此大多数场景下，保持浏览器默认的相邻关系，再辅以适当的 margin 调整即可。
另一个高频疑问是：为什么上下标的字号不跟着父级变化？实际上，默认字号缩小比例是相对父级计算的，但如果父级样式被某些 CSS 框架重置，或者自身设置了固定的 font-size，就可能出现上下标和正文比例失调。建议不要在 <sub> 或 <sup> 上直接写死像素字号，而是使用百分比或 em 值。这样不仅维护方便，也能保证在不同屏幕和字体设置下具备较好的一致性。
四、可访问性、替代方案与最终建议
从可访问性的角度来说，<sub> 和 <sup> 带有明确的语义，理论上屏幕阅读器应该能够识别它们，但实际支持情况并不统一。有些读屏软件可能只按普通文本朗读，不会提示用户某部分内容是上标或下标。因此，如果你的内容包含需要被精确理解的数学或化学表达式，可以考虑补充 <span> 元素配合 ARIA 属性来增强语义，例如使用 role="math" 或将表达式完整地放入 aria-label 中。对于一般的脚注编号和简单化学式，直接使用标签已经足够，不需要过度设计。
替代方案方面，除了使用 <sub> 和 <sup>，还可以选择 Unicode 上下标字符，例如 ²、³、₁、₂ 等。这种方式的优势是代码更简洁，复制和传输时不需要额外标签，但它的缺点也很明显：并不是所有数字和字母都存在对应的上下标 Unicode 字符，而且这些字符在部分字体中显示效果不一致，甚至会出现明显的字形差异。更关键的是，Unicode 上下标字符本身不具备明确的语义标记，搜索和辅助技术很难区分它是普通字符还是上下标。因此，对于正式的文档或需要长期维护的页面，标签仍然是首选。
总结起来，<sub> 和 <sup> 是 HTML5 中非常实用的语义标签。使用它们时要把握两个原则：第一，判断内容是否真的有下标或上标的语义，而不是单纯为了视觉效果；第二，在需要定制样式时，优先处理行高和基线偏移，并使用相对单位以保持比例。掌握这些基本知识和操作要点后，就能避开大多数新手常见的排版坑，让化学式、数学公式、脚注标记等内容既保持清晰的结构，又获得稳定、可维护的显示效果。
HTML5 sub标签HTML5 sup标签HTML5上下标修改时间：2026-09-18 17:32:54