在网页排版中，sup 与 sub 标签承担上标和下标的语义职责。本文将从语义、实现方法、样式控制、无障碍要点等维度展开，帮助前端开发者正确使用这两个标签实现上标/下标的网页呈现。
1. sup 与 sub 的语义基础
1.1 上标与下标的语义含义
在 HTML 中，<sup> 与 <sub> 是用于表示相对于正文的上标和下标的内联元素。正确的语义使用有助于搜索引擎理解文档结构，也便于屏幕阅读器向用户传达相对定位信息。
例如，数学公式中的指数、化学式中的化学计量以及脚注引用都可以通过这两个标签来实现。避免用纯样式来模拟，以免破坏文本的可访问性。
2. 常见应用场景与注意事项
2.1 化学式、公式、脚注等
在化学式中，正确的写法是将原子数目放置为 sub，如 H<sub>2</sub>O，以清晰表达化学计量关系。上标常用于指数或幂，如 E=mc<sup>2</sup>，能够直观表达物理公式中的指数关系。
对于脚注引用，使用 <sup> 包裹可点击跳转的标号，如 这是一个脚注1，从而在文档中保持可读性与可导航性。
<p>水的化学式：H<sub>2</sub>O</p>
<p>经典能量方程：E=mc<sup>2</sup></p>
<p>脚注示例：这是一个脚注<sup><a href="#note1">1</a></sup></p>3. 实现方法与样式控制
3.1 基本用法与原生实现
在原生 HTML 中，使用 <sup> 和 <sub> 即可实现上标/下标的基本效果。结合合理的 CSS 可以在保持语义的前提下实现一致的视觉呈现。
推荐的做法是优先使用原生标签来传达语义，其次再通过 CSS 调整视觉效果，避免仅靠字体缩放来实现，从而确保可访问性不被破坏。
/* 基本样式：维持语义的同时进行视觉微调 */
sup { vertical-align: super; font-size: 0.8em; }
sub { vertical-align: sub; font-size: 0.75em; }3.2 进阶样式与跨浏览器一致性
对于不同字体家族，默认的 vertical-align 可能略有差异。因此可以通过 CSS 进行微调，确保在主流浏览器中的对齐一致性。优先保持可读性，若需要在某些场景进行极端缩放，务必同时调整行高以避免行距压缩导致的阅读困难。
/* 进阶示例：在紧凑排版中保持清晰度 */
sup { vertical-align: 0.4em; font-size: 0.7em; }
sub { vertical-align: 0.25em; font-size: 0.65em; }4. 无障碍要点与可访问性
4.1 语义与可访问性策略
重要：sup/sub 是语义内联元素，读屏软件会将其视为与主文本相关联的附属信息。为了确保屏幕阅读器的用户体验，应该避免将重要信息仅通过样式来传递，必要时提供描述性文本或使用 aria 相关属性进行辅助描述。
如果文档中出现脚注或引用，使用带有清晰 href 的链接，并确保相关内容有可访问的目标描述。对于装饰性仅用于视觉呈现的上标/下标，可以考虑将其 aria-hidden="true"，并在必要处提供替代的文本信息以避免信息缺失。
<p>能量公式：E=mc<sup>2</sup></p>
<p aria-describedby="note1">这里有一个引用<sup><a href="#note1" id="ref1">1</a></sup>。</p>
<p id="note1" role="doc-notes" hidden>脚注的额外说明文本</p>5. 与 CSS 的协同控制与替代方案
5.1 当仅为视觉效果而非语义信息时的替代做法
如果确实只是为了装饰性排版，而非表达独立信息，请考虑将其改为无信息的视觉效果，并通过 aria-hidden 或 role="presentation" 来隐藏语义信息，以避免影响可访问性。
在需要保留语义的场景中，仍应优先使用 <sup> 与 <sub>，并辅以可访问性注释与清晰的描述文本，以提升整体可用性。
<p>示例：仅作为视觉效果的下标<span aria-hidden="true">₂</span></p>6. 实践要点与最佳实践对比
6.1 实践中的要点总结
在实际项目中，优先使用原生标签以保持语义性，避免仅通过 CSS 调整实现从而影响可访问性。对于需要强调的数学或化学信息，使用 明确的语义标签，并在需要时提供脚注或注释，以帮助所有用户更好地理解内容。
对比纯样式实现，正确的语义标签组合能带来更好的搜索引擎理解与屏幕阅读体验。若必须进行视觉替代，确保提供等效的文本描述或可访问的隐藏文本。
<p>正确用法示例：H<sub>2</sub>O 与 E=mc<sup>2</sup>。</p>7. 实时示例对比与对照
7.1 常见错误与正确写法对比
错误做法：用 CSS 将普通文本缩小并向上/向下偏移，以模拟上标/下标，可能会让屏幕阅读器误读或错过文本的语义信息。
正确做法：使用 <sup> / <sub>，必要时配合可访问性描述，确保所有用户都能获得一致信息。理解“上标/下标”的语义是关键，而不仅仅是外观。
<p>示例：E=mc<sup>2</sup>，水的化学式为 H<sub>2</sub>O。</p>