＜sup要素＞ - 上付き文字

公開日: 2017/02/09

sup要素は、上付き文字を表す要素です。化学記号、数式、文書における脚注番号、単位記号、発音記号などをマークアップできます。

概要

名前

sup (Superscript)

カテゴリー

Flow content

Phrasing content

Palpable content

配置できる場所

Phrasing contentが期待される場所。

コンテンツモデル

Phrasing content。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLElement

デフォルトのスタイル

sup {
	vertical-align: super;
	font-size: smaller;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-sub-and-sup-elements

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜sup要素＞ - 上付き文字</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/sup/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>sup要素は、上付き文字をマークアップする要素です。</p>

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

<h2>累乗数</h2>
<p>5<sup>3</sup>は、125である。</p>

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

<h2>商標などの記号</h2>
<p>Docomo<sup>TM</sup></p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/617/"> <meta charset="utf-8"> <title>【デモ】＜sup要素＞ - 上付き文字</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/sup/"> </head> <body>

<p>sup要素は、上付き文字をマークアップする要素です。</p> <h2>化学記号</h2> <p>水素イオンは、-H<sup>+</sup>と表します。</p> <h2>累乗数</h2> <p>5<sup>3</sup>は、125である。</p> <h2>脚注番号</h2> <p><p>私はこの間、PHPを使って、TwitterのAPI<sup><a href="#">[1]</a></sup>を利用してみたのだが、どうも難しい。</p></p> <h2>商標などの記号</h2> <p>Docomo<sup>TM</sup></p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>