<sup> - 数式や化学記号などの上付き文字

supは、化学記号や数式、文書における脚注番号、単位記号、発音記号などにおける上付き文字をマークアップするためのタグです。上付き文字にしないと意味が伝わらない場合に用いるタグであり、デザイン目的で利用するべきではありません。supというタグ名は、superscriptから来ています。

説明

化学記号などで、上付き文字は使われています。例えば下記は、化学式におけるイオン価数を、supタグを使ってマークアップした例です。

HTML

<p>水素イオンは、-H<sup>+</sup>と表します。</p>

水素イオンは、-H+と表します。

累乗数

数学における累乗数にも上付き文字が使われています。これらのマークアップにも、supタグを用います。

HTML

<p>よろしい、それでは100<sup>100</sup>倍返しだ(半沢直樹風)。</p>

よろしい、それでは100100倍返しだ(半沢直樹風)。

脚注番号

ドキュメントにおいて、脚注番号を表示する際にも用います。リンクを付ける場合は、supタグの中にaタグをネストしましょう。

HTML

<p>私はこの間、PHPを使って、TwitterのAPI<sup><a href="...">[1]</a></sup>を利用してみたのだが、どうも難しい。</p>

私はこの間、PHPを使って、TwitterのAPI[1]を利用してみたのだが、どうも難しい。

商標などの記号

トレードマーク(TM)など、一部記号にも、上付き文字が用いられます。

HTML

<p>Docomo<sup>TM</sup></p>

DocomoTM

概要

カテゴリー
  • Flow content (フロー・コンテンツ)
  • Phrasing content (フレージング・コンテンツ)
  • Palpable content (パルパブル・コンテンツ)
コンテンツモデル
フレージングコンテンツ
利用できる場所
フレージングコンテンツが期待される場所で使用できます。
利用できる属性
グローバル属性
許可されている、全てのグローバル属性を指定できます。
タグの省略
supタグは、開始タグ、終了タグ、共に省略することはできません。
標準のスタイル
sup {
	vertical-align: super ;
	font-size: smaller ;
}

参考情報

sup要素に関する情報は、下記サイトで確認できます。

  • W3C … W3CによるHTML5勧告。supの項目。
  • HTML language reference … W3Cによるsupのリファレンス。
  • WHATWG … WHATWGによる仕様書、HTML Living Standard。sup要素の仕様。