HTML タグ：下付き文字要素

定義と使い方

タグは、下付き文字（subscript）を表すインラインテキストです。

使用方法の参考事項

ほとんどのブラウザでは、デフォルトで小さなテキストとして表示され、ベースラインを下げてレンダリングされます。
タグは、単に表示やスタイルなどの視覚的な表現を目的としたものではなく、
タイポグラフィの規則や慣例（Typographical conventions）に従い、下付き文字で表す脚注番号、変数の添え字、化学式などの意味を合わせるために使用する必要があります。
このタグを使用することでコンテンツがそのような意味であることが明確になる場合にのみ、使用する必要があります。

使用例

タグは、タイポグラフィの規則や慣例である脚注番号や変数の添え字、化学式のための下付き文字といった意味を付与するために使用する必要があります。

脚注番号（footnote numbers）として使用

伝統的に脚注は、下付き文字として表示される数字を用いて表記されます。これは  の一般的な使用例です。

脚注（脚註、footnote）は、書籍や論文などの文書において、あるページに含まれる1つまたは複数の注釈を同じページの下部に配置すること、あるいはそのような注釈の処理方法を指します。
出典 - ウィキペディア：脚注

HTML

<p>
    最近発表された佐藤、鈴木、高橋の研究によると<sub><a href="#footnote1">1</a></sub>、
    新物質の発見により、エネルギー貯蔵技術が飛躍的に発展することが期待されています。
</p>
<footer>
    <p id="footnote1">
        脚注 1：佐藤、鈴木、高橋の研究に関する詳細は、該当の論文を参照してください。
    </p>
</footer>

変数添字（variable subscripts）として使用

数学において変数添字（variable subscript）は、同一の基本変数に異なるインデックスや番号を付与することで、複数の変数を表現する方法です。

化学式として使用

ちょっと待ってください！
 タグは、ここで使用例として挙げた脚注番号や変数の添字、化学式での使用だけに限定されません。タイポグラフィ（Typography）的な規則や慣例として使用される、あらゆる下付き文字に適用することができます。

注意点

 タグの用途は、タイポグラフィ（Typography）的な規則や慣例である脚注番号や変数の添字、化学式のための下付き文字といった意味や規則を付与するために使用しなければなりません。単に表示や形状の目的などの視覚的な表現のためのものではなく、このタグを使用することでコンテンツがこのような意味として明確になる場合にのみ使用すべきである、ということです。

「変数添字（variable subscripts）として使用」の例をもう一度見てみましょう。もし  タグがなければ、その意味が変わってしまうでしょう。

上記のコード例から  を除外して使用してみます。

この場合、意味が変更されます。「X軸に沿った水平座標の位置は、x1, ..., xnとして表現されます。」は、単に x1, ..., xn という文字の羅列を表しています。

もし特別な下付き文字の意味を持たず、単なる文字列として解釈されるならば、それは数学的な表記法ではなく、単純なテキストとして認識されるでしょう。下付き文字の使用は特別な意味を付与しているため、重要なのです。

もちろん、「これはスタイルの問題だ」と言うこともできますが、ウェブアクセシビリティのためのスクリーンリーダーなどを考慮すれば、単なるスタイルの問題ではありません。単純に意味が変更されたのです。

次の例は、 タグを使用せずに  タグを使用して、単に視覚的な表現のために CSS でスタイルを適用したものです。

HTML 単に表示やデザインなどの視覚的な表現をしたとしても、意味が変更されます。

<p>
    X軸に沿った水平座標の位置は、x<span style="vertical-align: sub; font-size: 0.75em;">1</span>, ..., x<span style="vertical-align:sub; font-size: 0.75em;">n</span>として表現されます。
</p>

コードの補足説明
CSSの vertical-align 属性の値を sub に指定すると、その要素はラインボックスの下付き文字（subscript）の基準に合わせて整列します。ここでは、下付き文字のように単に視覚的な表現を行うために指定したものです。

CSS remとemの違い

このように、単に視覚的な表現のために CSS のスタイルで  タグを代替して使用しないでください。単に表示やデザインなどの視覚的な表現をしたとしても、意味が変更されてしまいます。

スタイルだけを見れば、これは数学的な表記法のように見えますが、これは推奨されるマークアップではありません。HTMLは視覚的なスタイルに加えて、ウェブアクセシビリティのためのスクリーンリーダーや補助器具などを考慮しなければならないだけでなく、HTMLには明示されている多様な意味を持つタグがあるため、コンテンツに最も適切なタグを使用することが推奨されます。