定義と使い方
<sup> タグは、上付き文字（superscript）を表すインラインテキストです。
使用方法の参考事項
- ほとんどのブラウザでは、デフォルトで小さなテキストとして表示され、基準線を上げてレンダリングされます。
<sup>タグは、単に表示や見た目の目的などの視覚的な表現のためのものではなく、- タイポグラフィ的な規則や慣例（Typographical conventions）上の上付き文字として表す指数や序数などの意味を合わせるために使用しなければなりません。
- このタグを使用することでコンテンツがこのような意味として明確になる場合にのみ使用しなければなりません。
使用例
<sup> タグは、タイポグラフィ的な規則や慣例である指数や序数などの意味や規則を付与するために使用しなければなりません。
指数（exponent）として使用
コードの補足説明<var> タグは変数を表します。
このタグは数学的な式や実際の変数、物理量を表す記호（シンボル）として使用されます。
序数（ordinal number）として使用
ちょっと待って！<sup> タグは、ここで使用例として活用した指数や序数の使用だけに限定されるものではありません。タイポグラフィ的な規則や慣例として使用されるすべての「上付き文字」に使用できます。
注意点
<sup> タグの用途は、タイポグラフィ的な規則や慣例である指数や序数といった意味や規則を付与するために使用しなければなりません。単に表示や形状の目的などの視覚的な表現のためのものではなく、このタグを使用することでコンテンツがこのような意味として明確になる場合にのみ使用しなければならないということです。
「アインシュタインの相対性理論の例」を改めて見てみましょう。もし <sup> タグがなければ、その意味が変わってしまいます。
「アインシュタインの相対性理論の例」を <sup> タグなしでマークアップしてみましょう。
この場合、指数を意味する 2 が、掛け算の 2 に変わってしまいます。もちろん、「これはスタイルの問題だ」と言うこともできますが、ウェブアクセシビリティのためのスクリーンリーダーなどを考慮すると、単なるスタイルの問題ではありません。単純に、意味が変更されたのです。
次の例は <sup> タグを使用せず、<span> タグを使用して、単に視覚的表現のために CSS でスタイルを適用したものです。
コードの補足説明
CSSの vertical-align プロパティの値を super に指定すると、その要素はラインボックスの上付き文字の基準で整列します。ここでは上付き文字のように、単に視覚的な表現のために指定したものです。
このように、単に視覚的な表現のために CSS スタイルで <sup> タグを代替して使用しないでください。単に表示や形状の目的などの視覚的な表現をしたとしても、意味が変更されてしまいます。
それでは、序数の使用において「5番目の英語の序数の例」を改めて見てみましょう。
「5番目の英語の序数の例」を <sup> タグなしでマークアップしてみましょう。
上のコードを見ると、 <sup> タグがなくても全く問題ありません。間違った文法でもありません。
しかし、HTMLにはHTMLに明示されている多様な意味を持つタグがありますが、コンテンツに最も適切なタグを使用することを推奨します。
タイポグラフィ的な規則や慣例上、序数は <sup> タグを使用するように定められているため、序数に <sup> タグを使用するほうがウェブ標準により適合しています。そうすることで、 th が序数としての意味としてより明確になるからです。
ブラウザ互換性
| タグ |
デスクトップ Chrome
|
デスクトップデスクトップ Edge
|
デスクトップ Firefox
|
Safari
|
|---|---|---|---|---|
<sup>
|
1 | 12 | 1 | 4 |
仕様書
| 仕様書 | |
|---|---|
<sup>
|
HTML Standard #the-sub-and-sup-elements |