HyperText Markup Language sup element.
The <sup> tag defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1].
Tip: Use the <sub> tag to define subscript text.
sup要素は、Superscript(形:上付きの, 名:上付き文字) の略で、<sup>〜</sup> で囲まれたテキストを上付き文字として表示します。単純に表現や表示の結果を得るためではなく、表記上の習慣や規則で上付き文字でないと意味が変わってしまうようなところにのみ使用してください。上付き文字は通常、小さめのテキストが高いベースラインで表示されますが、sup要素に未対応のテキストブラウザなどでは、普通の文字として表示されます。
また、逆に文字を下付きにする要素として <sub> があります。化学記号を表す場合などに便利です。
例えば、高いベースラインを使用しているビジネスや製品のワードマークをスタイル付けするには、 sup要素ではなく CSS を使用してください (vertical-align)。例えば、vertical-align:super; とするか、ベースラインを50%上げるのであれば、vertical-align:50%; とするかしてください。
上付き文字の代表的な利用シーンとしては、数式が挙げられます。
数式のマークアップ例
<p>円の面積は <var>π</var><var>r</var><sup>2</sup> で求められます。<br>
<var>π</var> は円周率を、 <var>r</var> は円の半径を表します。</p>
数式のマークアップ例のサンプル
円の面積は πr2 で求められます。
π は円周率を、 r は円の半径を表します。
このように、簡単な数式であれば、sup要素を使って乗数を表現しても問題ありません。ただ、複雑な数式を表現する場合や、数式の意味を正確に伝えたい場合であれば、MathMLが推奨されます。ただし、現実問題として、全てのブラウザで MathMLをネイティブでサポートしているわけではありませんので、現状、数式表現については、悩ましいと言えるでしょう。
MathMLでの記述例
<math>
<msup>
<mi>πr</mi>
<mn>2</mn>
</msup>
</math>
MathMLでのサンプル
sup要素は、cm<sup>2</sup> といった単位にも使うことができます。
また、注釈をつける際にも使うことができます。
注釈をつけた使用例
HTML[注1]
HTML source
<p>HTML<sup>[注1]</sup></p>
下記は、注釈にリンクをつけて、リンク先は id属性で場所を指定しています。こうしておくことで注釈の説明文をページの下部など、別の場所に記述することができます。
注釈にリンクをつけた使用例
HTML[注1]
注1：HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、コンピュータが理解できるマークアップをするための言葉です。
HTML source
<p>HTML<sup><a href="#t">[注1]</a></sup></p>
<p id="t">注1：HTMLとは、ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略で、コンピュータが理解できるマークアップをするための言葉です。</p>
なお、HTML5では、sup要素で、印刷慣例で使われるような上付き文字を表すことも想定しています。
しかし、印刷慣例で使われているとはいえ、上付き文字にすることで、意味が与えられる場合でなければ、この要素を使ってはいけません。
上付き文字を使う印刷慣例
<p><cite>L'Amie de <abbr>M<sup>me</sup></abbr> Maigret</cite> は、1950年にフランスで出版された小説です。</p>
上付き文字を使う印刷慣例のサンプル
L'Amie de Mme Maigret は、1950年にフランスで出版された小説です。
印刷慣例で最も多い使用例はフランス語の省略語の表現です。Mme は、フランス語で婦人を表し、madam（マダム）の省略語です。これは英語のMrs.に相当するものです。ちなみに、英語の Miss. に相当する mademoiselle（マドモアゼル）の省略語は Mlle です。これらの省略語は、上付き文字を使うことで、省略語であることを表している印刷慣例です。決して、スタイリング目的で使っているわけではありません。
日本語においては、上付き文字を使うような印刷慣例は、あまり馴染みがありません。そのため、これに相当する使い方は、少なくとも日本語のページ制作においては稀なようです。
米国の慣例ではありますが、上付き文字のもう 1つの代表的な利用シーンとして、商品商標（ trademark ）を表す TM 、役務商標（ service mark ）を表す SM 、登録商標（ registered trademark ）を表す ® のような識別標識が挙げられます。
商標のマークアップ例
<p><small>Silverlight<sup>TM</sup>はMicrosoft<sup>®</sup>の商標です。</small></p>
商標のマークアップのサンプル
SilverlightTMはMicrosoft®の商標です。
その他には、序数の表現。例えば英語の "fourth" を "4th" と表現することなど、数字と上付き文字で表現される言語に依存したテキストを使用して略されることがあります。
序数の表現の記述例
<p>English: 5<sup>th</sup></p>
<p>French: 5<sup>ème</sup></p>
序数の表現のサンプル
English: 5th
French: 5ème
sup {
vertical-align: super;
font-size: smaller;
line-height: normal;
}
上付き文字を表現する際に必要になりそうな CSSです。
文字が大きすぎる場合や小さすぎる場合に font-sizeプロパティを使って文字の大きさを調整することができます。
文字の大きさの指定例
HTML[注1] x-small
HTML[注1] small
HTML[注1] smaller
HTML[注1] -
HTML[注1] large
HTML[注1] larger
HTML[注1] x-larger
HTML source
<p>HTML<sup class="a1">[注1]</sup></p>
<p>HTML<sup class="a2">[注1]</sup></p>
<p>HTML<sup class="a3">[注1]</sup></p>
<p>HTML<sup>[注1]</sup></p>
<p>HTML<sup class="a5">[注1]</sup></p>
<p>HTML<sup class="a6">[注1]</sup></p>
<p>HTML<sup class="a7">[注1]</sup></p>
CSS source
sup.a1 { font-size:x-small; }
sup.a2 { font-size:small; }
sup.a3 { font-size:smaller; }
sup.a5 { font-size:large; }
sup.a6 { font-size:laeger; }
sup.a7 { font-size:x-large; }
sup要素の標準フォントサイズが１段階小さく表示されますので、font-sizeプロパティの small と smaller は同じ大きさとなるようです。
small, smaller, 指定なし
HTML[注1][注1][注1]
この１段階小さい表示は、ブラウザによって大きさが違って表示されるかもしれませんが、私には３つとも同じ大きさに見えます。
large, larger
HTML[注1][注1]
こちらの１段階大きい表示も、ブラウザによって大きさが違って表示されるかもしれませんが、私には large よりも larger の方が大きいように見えます。
この font-sizeプロパティのキーワードによる指定の場合は少し注意が必要なようです。
表示位置が高すぎたり低すぎたりする場合に vertical-alignプロパティを使って位置を調整することができます。
文字の表示位置の指定例
HTML[注1] -
HTML[注1] super
HTML[注1] 50%
文字の表示位置の指定例（20%, 指定なし, 30%）
HTML[注1][注1][注1]
ブラウザによって表示位置の見た目が異なっている可能性もありますが、vertical-alignプロパティを %（パーセンテージ）で指定した場合、私の場合は指定していないものは、20%と 30%の間ぐらいに見えます。
上記の font-sizeプロパティと組み合わせて使うとより大きく見た目が変わってきます。