supタグ -テキストを上付き文字として表示する｜HTML辞典
<sup>タグとは？
<sup> タグは、テキストを上付き文字（superscript）として表示するためのタグです。
数学の指数、商標記号、脚注などを表現する際に使用されます。
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）。
閉じタグの有無
<sup> は 開始タグ（<sup>）と閉じタグ（</sup>）の両方が必要 です。
基本的な記述方法
<p>2<sup>3</sup> = 8</p>
使用できる主な属性
<sup> タグには特別な属性はありません。
CSSを使ったデザイン変更
<sup> のデフォルトのスタイルは 通常のテキストより小さく、上に配置 されますが、カスタマイズも可能です。
sup {
font-size: 0.8em;
vertical-align: super;
color: red;
}
適切な使用例
✅ 数学の指数を表現する
<p>数式: x<sup>2</sup> + y<sup>2</sup> = r<sup>2</sup></p>
✅ 商標記号を示す
<p>この製品は ACME<sup>®</sup> の登録商標です。</p>
✅ 脚注を示す
<p>この研究は Smith et al.<sup>1</sup> によって発表されました。</p>
適切でない使用例（誤った使い方）
❌ <sup> を単なるデザイン目的で使用する
<!-- NG: スタイリングのために <sup> を使用 -->
<p>この商品は <sup>特別価格</sup> で提供されています。</p>
✅ 正しい書き方（装飾ではなく、意味のある用途に使用）
<p>公式: E = mc<sup>2</sup></p>
❌ <sup> を <sub> の代わりに使用する（下付き文字には <sub> を使う）
<!-- NG: 下付き文字に <sup> を使う -->
<p>水の化学式は H<sup>2</sup>O です。</p>
✅ 正しい書き方（下付き文字には <sub> を使用）
<p>水の化学式は H<sub>2</sub>O です。</p>
<sup>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<sup> | 上付き文字を表す | テキストを上に配置 | 数学の指数、商標、脚注 |
<sub> | 下付き文字を表す | テキストを下に配置 | 化学式、脚注 |
<small> | 文字サイズを小さくする | フォントサイズを縮小 | 免責事項、補足情報 |
使用上の注意点
✅ <sup> は意味を持つ場面でのみ使用する
- 数学の指数、商標記号、脚注 など、適切な用途で活用する。
✅ <sub>（下付き文字）との区別を正しく行う
- 化学式の H<sub>2</sub>O のような下付き表記には
<sub>を使う。
✅ CSS でスタイルを適用する場合、vertical-align: super; を使用
font-sizeを適切に調整して視認性を確保する。
関連タグ
まとめ
<sup> タグは、HTML文書内で 数学の指数、商標記号、脚注などを上付き文字として表現するためのタグ です。
適切に使用すると、科学的・数学的な記述の可読性が向上します。
