HTML 上标与下标指南：语义、可访问性与完整示例

HTML 上标与下标：语义、可访问性与完整示例

<sup> 表示上标，<sub> 表示下标。关键不在于“把字变小并移动”，而在于这种排版约定会传达含义。WHATWG HTML 标准要求：只有当去掉上标或下标会改变内容含义时，才使用这两个元素。

1. 快速判断

内容含义 元素 简单示例
指数、语言约定的序数或缩写、脚注标记 <sup> x<sup>2</sup>
化学式、变量下标 <sub> H<sub>2</sub>O

<sup> 与 <sub> 都是行内的 phrasing content，开始和结束标签都不能省略。在 HTML 中统一写小写标签；不要沿用旧文中的 <SUB> 写法。

2. 合适的语义用途

下面三行分别表示平方、化学式和英语序数，标签承担了有意义的排版语义：

<var>x</var><sup>2</sup>
H<sub>2</sub>O
5<sup>th</sup>
  • 数学： 简单指数和变量下标可以使用 <sup>、<sub>，并可结合 <var>。分数、根号、求和、同时出现上下标等复杂表达式应优先使用 MathML Core。
  • 化学： H<sub>2</sub>O 适合简单分子式；核素、离子或结构复杂时，应考虑 MathML 或领域专用的可访问表示。
  • 序数和缩写： 5<sup>th</sup> 只在对应语言的排版惯例需要时使用；先写自然、可理解的文本。
  • 脚注： <sup> 只负责标记外观与语义，实际跳转仍要使用链接，并给只有数字的链接一个有意义的可访问名称。
<p>
  A statement with a source.
  <sup><a href="#note-1" aria-label="Footnote 1">1</a></sup>
</p>
<ol>
  <li id="note-1">The source for the statement.</li>
</ol>

3. 不要把它当作通用定位工具

若只是商标、Logo、价格角标或装饰文字需要上移，使用普通 <span> 和 CSS，而不是伪造上标语义：

<span class="brand-mark">TM</span>
.brand-mark {
  font-size: 0.8em;
  vertical-align: super;
}

默认浏览器样式通常已经足够。覆盖 font-size、line-height 或 vertical-align 前，要在正文、链接、不同字体、窄行高和高倍缩放下测试。字号过小会降低可读性；line-height: 0 等常见技巧还可能在紧凑布局中造成重叠。不要仅靠基线位置或字号区分重要信息。

4. 可访问性与纯文本回退

现代 HTML 可访问性映射会把 <sub> 和 <sup> 暴露为 subscript 与 superscript 语义，但浏览器、屏幕阅读器、语音和用户设置的实际朗读仍可能不同。因此：

  • 保留原生元素。WAI-ARIA 将 subscript 与 superscript 角色列为不可命名，因此不要给 <sup> 或 <sub> 添加 aria-label 或 aria-labelledby；需要消除歧义时，使用可见说明或 MathML。
  • 对关键或容易混淆的表达式，在可见文本中补充读法，例如 x<sup>2</sup> (x squared)、H<sub>2</sub>O (H two O, water)；复杂数学使用 MathML。
  • 数字脚注应是可聚焦链接，具有“Footnote 1”之类的可访问名称、存在的目标和可选返回链接。
  • 复制到纯文本、搜索索引或消息应用后，基线信息可能丢失。为导出提供 x^2、H2O、Footnote 1 等明确形式，不要假设 Unicode 上下标字符覆盖所有内容。
  • 给文档和语言片段设置正确的 lang，并在键盘操作、200% 以上缩放及项目实际支持的辅助技术中测试。

5. 最小完整 HTML 文件

把下面内容保存为 sup-sub.html。它没有外部脚本或依赖，保留浏览器默认的上下标排版，并为可能含糊的示例提供可见读法。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Semantic superscript and subscript</title>
  <style>
    body {
      max-width: 48rem;
      margin: 2rem auto;
      padding: 0 1rem;
      font: 1rem/1.6 system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <main>
    <h1>Semantic superscript and subscript</h1>

    <p>Equation: <var>x</var><sup>2</sup> (x squared).</p>
    <p>Chemical formula: H<sub>2</sub>O (H two O, water).</p>
    <p>English ordinal: 5<sup>th</sup> (fifth).</p>

    <p>
      A statement with a source.
      <sup>
        <a id="note-ref-1" href="#note-1" aria-label="Footnote 1">1</a>
      </sup>
    </p>

    <section aria-labelledby="notes-heading">
      <h2 id="notes-heading">Notes</h2>
      <ol>
        <li id="note-1">
          The source for the statement.
          <a href="#note-ref-1" aria-label="Back to footnote 1 reference">↩</a>
        </li>
      </ol>
    </section>
  </main>
</body>
</html>

6. 验证方法

  1. 在浏览器打开 sup-sub.html，确认四个示例可读，Tab 键能到达脚注引用和返回链接，跳转目标正确。
  2. 在开发者工具 Console 运行下面的静态 DOM 断言。没有输出表示断言通过；失败时浏览器会报告对应行。
const expected = { sup: 3, sub: 1 };

console.assert(document.querySelectorAll("sup").length === expected.sup);
console.assert(document.querySelectorAll("sub").length === expected.sub);
console.assert(
  [...document.querySelectorAll("sup, sub")].every(
    (element) => element.textContent.trim().length > 0,
  ),
);
  1. 用 W3C Nu HTML Checker 检查完整文件。下面命令会把文件发送给 W3C 公共服务；含私密内容的页面不要这样上传，应改用组织批准的本地验证器。
curl -sS \
  -H 'Content-Type: text/html; charset=utf-8' \
  --data-binary @sup-sub.html \
  'https://validator.w3.org/nu/?out=json'
  1. 验证器通过不等于可访问性完成。仍需检查纯文本复制结果、缩放、键盘焦点、可见说明，以及目标屏幕阅读器的朗读。

7. 发布前检查清单

  • [ ] <sup> 或 <sub> 的存在会改变或澄清内容含义。
  • [ ] 没有把它们用于 Logo、角标或一般视觉定位。
  • [ ] 标签成对闭合，大小写统一，嵌套有效。
  • [ ] 简单数学与化学式有足够上下文；复杂表达式改用 MathML。
  • [ ] 数字脚注是可访问的链接，目标存在，并可返回正文。
  • [ ] CSS 没有让文字过小、重叠或只靠位置传达信息。
  • [ ] 纯文本和复制粘贴后的形式仍能理解。
  • [ ] 完整 HTML 已通过 Nu Checker，并完成键盘、缩放与辅助技术检查。

8. 权威资料

9. 2011 年原文存档

以下完整保留 source_export 的可见正文，仅规范化了每行末尾空白。它反映当时的简短笔记，其中的大写 <SUB> 不是本维护版推荐的代码风格。

HTML上标和下标


上标：A<sup>A</sup>
 示例：AA

下标：A<SUB>A</SUB>
 示例：AA

Leave a Reply