HTML <sup> element

<sup> は上付き文字（superscript）を表現するHTMLタグである。

書式

HTMLの場合、タグ名や属性名は大文字と小文字を区別しない。終了タグ（閉じタグ）は省略できない。下記のうち、いずれの書き方でもよい。

<SUP>
  <!-- phrasing content -->
</SUP>
<sup>
  <!-- phrasing content -->
</sup>

開始タグと終了タグの間にはインライン要素を含めることができます。終了タグは省略できません。属性はすべて省略可能です。

XHTMLの場合、タグ名や属性名を小文字で記述する。終了タグ（閉じタグ）は省略できない。

<sup>
  <!-- phrasing content -->
</sup>

属性

sup要素には次の属性を指定できる。

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定することができる。
data-*
カスタムデータ属性を指定する。カスタムデータ属性とは、JavaScriptから独自の属性を読み取るための仕組みである。
dir
テキストを記述する方向を指定する。
dir属性
値 値
ltr 左から右へ記述する (日本語や英語など)
rtl 右から左へ記述する (アラビア語など)
auto ユーザーエージェントに決定させる
id
HTML文書内で一意な識別子を指定する。
lang
要素の言語と地域を指定する。
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定することができる。
title
要素に関するアドバイザリー情報を指定する。

べき乗

2<sub>8</sup>

28

2乗または3乗であれば、Unicodeでも代用できる。

2&sup2; 2&sup3;

2² 2³

平米

m<sub>2</sup>

m2

平方メートルまたは立方メートルはUnicodeでも代用できる。

m&sup2; m&sup3;

m² m³

イオン

H<sub>+</sup>

H+

商標

Example<sub>TM</sup>

ExampleTM

商標マークはUnicodeでも代用できる。

Example&trade;

Example™

コンテンツ・モデル

sup 要素の開始タグと終了タグの間には、フレージング・コンテンツを含めることができる。具体的には、以下に示す要素である。

JavaScript

JavaScriptからはHTMLElementインタフェースを通じてsup要素へアクセスできる。

HTMLElementインタフェースのプロパティ
プロパティ 型 説明
className DOMString sup要素のclass属性
clientHeight Number sup要素の内部の高さ（読取専用）
clientWidth Number sup要素の内部の幅（読取専用）
dataset DOMStringMap sup要素のカスタムデータ属性
dir DOMString sup要素のdir属性
innerHTML DOMString sup要素内のマークアップ
innerText DOMString ノードに描画されるテキスト
id DOMString sup要素のid属性
lang DOMString sup要素のlang属性
style CSSStyleDeclaration sup要素のstyle属性
title DOMString sup要素のtitle属性

JavaScriptからsup要素の属性を取得する例を次に示す。

var title = document.getElementById("example").title;

JavaScriptからsup要素の属性を設定する例を次に示す。

document.getElementById("example").lang = "ja-JP";

参考文献

Web Hypertext Application Technology Working Group (2021) "Text-level semantics" HTML Living Standard