HTML 上付き・下付き文字ガイド：意味、アクセシビリティ、実例

HTML の上付き・下付き文字：意味、アクセシビリティ、完全な実例

<sup> は上付き文字、<sub> は下付き文字を表します。単に文字を小さくして移動するためではなく、その組版上の慣例が意味を伝えるための要素です。WHATWG HTML Standard は、上下の位置をなくすと内容の意味が変わる場合にだけ使用するよう定めています。

1. すぐに判断する

内容の意味要素簡単な例
指数、言語固有の序数・略語、脚注記号<sup>x<sup>2</sup>
化学式、変数の添字<sub>H<sub>2</sub>O

<sup> と <sub> はどちらもインラインの phrasing content で、開始タグと終了タグを省略できません。HTML では小文字表記に統一し、旧記事の <SUB> という書き方を引き継がないでください。

2. 意味に合った用途

次の 3 行は、二乗、化学式、英語の序数を表します。要素は意味のある組版上のセマンティクスを持ちます。

<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. 汎用の位置調整には使わない

商標、ロゴ、価格バッジ、装飾文字を上へ移動したいだけなら、偽の上付き文字セマンティクスを作らず、通常の <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 をブラウザーで開きます。4 つの例が読みやすく、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> が内容の意味を変えるか明確にしている。
  • [ ] ロゴ、バッジ、一般的な視覚位置調整には使っていない。
  • [ ] タグが対になり、大小文字が統一され、正しく入れ子になっている。
  • [ ] 単純な数式・化学式には十分な文脈があり、複雑な式には 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