<sup>: 上付き文字要素
<sup> は HTML の要素で、表記上の理由で上付き文字として表示するべきインラインテキストを指定します。上付き文字は普通、小さめのテキストを使用して高いベースラインで表示されます。
試してみましょう
属性
この要素にはグローバル属性のみがあります。
使用上のメモ
<sup> 要素は、単純に表現や表示の結果を得るためではなく、表記規則上の理由、つまり、表記上の習慣や規則でテキストの位置を変更する必要がある場合にのみ使用してください。
例えば、高いベースラインを使用しているビジネスや製品のワードマークをスタイル付けするには、<sup> ではなく CSS を使用してください（例えば vertical-align）。例えば、 vertical-align: super とするか、ベースラインを 50% 上げるのであれば、vertical-align: 50% とするかしてください。
<sup> の適切な使用例には次のようなものがあります (但し、制約するものではありません)。
- べき乗の表示、例えば "x3"。これには、特に複雑な場合には、 MathML の使用を検討する価値があるかもしれません。以下の例のべき乗を参照してください
- 一部の言語で特定の略語を表示する際の Superior letter。例えば、フランス語では、 "mademoiselle" は "Mlle" のように略すことができます。例は Superior lettering を参照してください。
- 序数の表現、たとえば "fourth." を "4th" と表現すること。例は序数を参照してください。
例
べき乗
以下のようにべき乗は、上付き文字のもっとも一般的な使い方です。
html
<p>
物理学の中でもっとも有名な等式の一つが、 <var>E</var>=<var>m</var><var>c</var
><sup>2</sup> です。
</p>
結果
Superior lettering
Superior lettering は、厳密には上付き文字と同じではありません。しかし、 HTML で superior lettering を表現することは <sup> の一般的な利用方法です。最も多い superior lettering の使用例はフランス語の略語の表現です。
html
<p>Robert a présenté son rapport à M<sup>lle</sup> Bernard.</p>
結果
序数
英語の "fourth" やスペイン語の "quinto" などの序数は、数字と上付き文字で表示される言語に依存したテキストを使用して略されることがあります。
html
<p>
The ordinal number "fifth" can be abbreviated in various languages as follows:
</p>
<ul>
<li>English: 5<sup>th</sup></li>
<li>French: 5<sup>ème</sup></li>
</ul>
結果
技術的概要
| コンテンツカテゴリー | フローコンテンツ, 記述コンテンツ, 知覚可能コンテンツ |
|---|---|
| 許可されている内容 | 記述コンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | HTMLElement |
仕様書
| Specification |
|---|
| HTML Standard # the-sub-and-sup-elements |
ブラウザーの互換性
BCD tables only load in the browser