この記事の要点

<sub> は下付き文字 (subscript) を表すインライン要素 化学式 (H<sub>2</sub>O)、数式の添字、脚注番号などで使う <sup> (上付き) と対をなす。e=mc<sup>2</sup> など CSS の vertical-align: sub + font-size: smaller で代替可能だが、意味を持たせるなら要素を使う 複雑な数式は MathML や KaTeX / MathJax 等の専用ライブラリを推奨

<sub> とは

<sub> (subscript) は、下付き文字として文字を表示するインライン要素です。化学式、数学の添字、脚注、変数のインデックスなどに使われます。

<!-- 水分子 -->
<p>水の化学式は H<sub>2</sub>O である。</p>

<!-- 二酸化炭素 -->
<p>CO<sub>2</sub> は温室効果ガスの代表である。</p>

<!-- 数学の添字 -->
<p>数列 a<sub>1</sub>, a<sub>2</sub>, a<sub>3</sub>, ... a<sub>n</sub></p>

<!-- 脚注番号 -->
<p>詳細は別表<sub>1</sub>を参照。</p>

<sup> との対

<sub> と <sup> (superscript: 上付き) は一対の要素です。

要素	用途	例
<sub>	下付き文字	H2O, log10(x)
<sup>	上付き文字	x2, 109, ™, ®

主な使用例

化学式

<!-- 水 -->
H<sub>2</sub>O

<!-- 硫酸 -->
H<sub>2</sub>SO<sub>4</sub>

<!-- グルコース -->
C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>

<!-- イオン: 上付きと組合せ -->
SO<sub>4</sub><sup>2-</sup>

<!-- 同位体 (上下混在: 推奨は MathML) -->
<sup>14</sup>C

数式・統計

<!-- 数列 -->
S<sub>n</sub> = a<sub>1</sub> + a<sub>2</sub> + ... + a<sub>n</sub>

<!-- 対数 -->
log<sub>2</sub>(x) = ln(x) / ln(2)

<!-- 統計 -->
N<sub>0</sub> = 初期値, N<sub>t</sub> = t 時点の値

<!-- 偏微分 -->
∂f / ∂x<sub>i</sub>

変数インデックス（プログラミング解説など）

<p>
  配列 arr のインデックス i は 0 から N-1 の範囲を取り、
  arr<sub>i</sub> が i 番目の要素を表す。
</p>

デフォルトスタイルと CSS 代替

多くのブラウザの初期 CSS は次のように定義されています:

/* ブラウザの user-agent stylesheet */
sub {
  vertical-align: sub;
  font-size: smaller;
  line-height: normal;
}

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

CSS だけで似た表示を作る

/* 意味は持たない、見た目だけ下付き */
.subscript-like {
  vertical-align: sub;
  font-size: 0.75em;
  line-height: 0;  /* 行間が広がるのを防ぐ */
}

ただし意味的なマークアップ (sub) と CSS による見た目だけの表現は別物です。化学式・数式のようにセマンティクスが重要なら必ず <sub> を使ってください。

カスタマイズ: 行間を保つ

そのまま使うと行の高さが広がってしまうことがあります。次の CSS で抑制できます:

sub, sup {
  font-size: 0.75em;
  line-height: 0;       /* 行高を増やさない */
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}

MathML での代替（複雑な数式）

3 行以上の数式や、複数の上下付きが入り組む場合は <sub> では限界があります。MathML を使うのが本来の解です:

<!-- x の n 乗 - MathML -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <msup>
    <mi>x</mi>
    <mn>n</mn>
  </msup>
</math>

<!-- x_i^2 - 上下付き混在 -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <msubsup>
    <mi>x</mi>
    <mn>i</mn>
    <mn>2</mn>
  </msubsup>
</math>

KaTeX / MathJax を使う場合

<!-- KaTeX -->
<link rel="stylesheet" href="katex.min.css">
<script defer src="katex.min.js"></script>
<script defer src="auto-render.min.js"
  onload="renderMathInElement(document.body);"></script>

<p>水の分子式は $H_2O$ である。</p>
<p>エネルギーは $E = mc^2$ である。</p>

アクセシビリティ

スクリーンリーダーは <sub> を普通の文字として読み上げることがほとんどです。「H 2 O」のように読まれます。意味を保証したい場合は aria-label で補完します:

<span aria-label="水">H<sub>2</sub>O</span>

よくあるミス

• 上下逆 - <sup> と <sub> を間違える
• 大量の数式を全て sub/sup で組む → MathML / KaTeX に切替
• 装飾目的で使う → CSS で済むなら CSS の方が適切
• SEO 目的でキーワードを sub に → 効果なし、可読性悪化

FAQ

Q: sub と sup は同時に使える？
A: 一つのテキスト要素に対し同時には付けられません（HTML の仕様上どちらか）。同時に表示したい場合は MathML を使うか、CSS で重ねます。

Q: 行間が広がる問題の解決法は？
A: 上述の line-height: 0 + position: relative 方式が最も簡単。

Q: sub/sup は SEO に影響する？
A: 検索キーワードへの直接効果はありません。意味的に正しいマークアップとして使うべきです。