HTML <sub> 下付き文字要素

試してみましょう

<p>
  ほとんどすべての開発者が大好きな分子は、
  C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>
  であり、これは「カフェイン」とも呼ばれています。
</p>

p {
  font:
    1rem "Fira Sans",
    sans-serif;
}

属性

この要素にはグローバル属性のみがあります。

使用上のメモ

<sub> 要素は、単純に表現や表示の結果を得るためではなく、表記規則上の理由、つまり、表記上の習慣や規則でテキストの位置を変更する必要がある場合にのみ使用してください。

例えば、変更したベースラインをワードマークの中で使用している企業名にスタイル付けするために <sub> を使用することは適切ではありません。このような場合には CSS を使用してください（例えば vertical-align プロパティを、vertical-align: sub または、もっと詳細にベースラインの位置を制御するために、vertical-align: -25% など）。

<sub> の適切な利用場面には次のようなものがあります（これに限定されるものでありません）。

• 脚注番号のマークアップ。例については脚注番号を参照してください。
• 数学における下付き文字の変数値のマークアップ（ただし、 MathML の数式を使うことも検討してください）。変数の下付き文字を参照してください。
• 化学式における原子数の記述（例えば、すべての開発者のお友達、C₈H₁₀N₄O₂ 別名「カフェイン」）。化学式を参照してください。

例

脚注番号

伝統的な脚注は下付き文字で表示される番号を使って記述されます。これは <sub> のよくある使い方です。

<p>
  中村、ジョンソン、メイソン<sub>1</sub>の計算によると、この場合、どちらの粒子も完全に消滅することになります。
</p>

結果は次のようになります。

変数の下付き文字

数学では、同じ概念に関連する一連の変数（例えば同じ軸の距離）を、同じ変数名と下付き文字を使用して表現します。例えば以下のようになります。

<p>
  X 軸に沿った水平座標の位置は <var>x<sub>1</sub></var> … <var>x<sub>n</sub></var> と表します。
</p>

出力は次の通りです。

化学式

化学式を書くときは、 H₂O のように、分子の記述の中で原子の数を下付き数字で記述します。水の場合、下付きの "2" は、水分子の中に 2 つの水素原子があることを表します。

他の例です。

<p>
  ほとんどすべての開発者が大好きな分子は、
  C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>
  であり、これは「カフェイン」とも呼ばれています。
</p>

結果

技術的概要

仕様書

ブラウザーの互換性

関連情報

• 上付き文字を表現する HTML の <sup> 要素。sub 要素と同時に使用することはできません。化学式で上付き文字と下付き文字の両方が必要な場合には、MathML を用いる必要があります。
• MathML の <msub>, <msup>, <msubsup> 要素
• CSS の vertical-align プロパティ