[1] 多くの[[用字系]] (たとえば[[フランス語]]) では、
適当な[[レンダリング]]のために[[上付き]]文字、
[[下付き]]文字が必要です。そのような場合の上付き文字のマーク付けのために
[CODE(HTMLe)[sup]] を使います。 [SRC[HTML 4]]

[10] [[CSS]] では、 [CODE(CSS)[[[vertical-align]]]]
[[特性]]の値を [CODE(CSS)[[[super]]]]
([CODE(illegal)[sup]] では''ない''ことに注意。)
とすると[[上付き]]で[[レンダリング]]されます。

* 仕様書

[REFS[
- [33] [CITE@en-US-x-hixie[HTML Standard]] ([TIME[2016-11-21 08:12:17 +09:00]]) <https://html.spec.whatwg.org/#the-sub-and-sup-elements>
]REFS]

* 意味

[40] [RUBYB[[[上付き]]]@en[superscript]]を[[表します][意味]] [SRC[>>33]]。

[38] [[要素名]]の [CODE[sup]] は、 [[superscript]] ([[上付き]]) に由来します。

[9] [CODE(HTMLe)[sup]] 要素型が適当なのは、
[[言語]]的その他の理由で[[文章]]が成立するために[[上付き]]である必要がある時だけです。
単に[[装飾]]のためだけの理由で[[上付き]]にしたい場合は、
[[スタイル・シート]]を使うべきです。

[42] 特定の意味を持った[RUBYB[印刷上の慣習]@en[typographical conventions]]でのみ使わなければ[MUST[ならず]]、
見た目を整えるためだけに使っては[MUST[なりません]]。
一般に、[[要素]]が無かったとしたら意味が変わってしまうような場合のみ、
使う[SHOULD[べき]]です。 [SRC[>>33]]

[EG[
[43] [[言語]]によっては[[略語]]で使います。 [SRC[>>33]]
[PRE(HTML code)[
<span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span>
]PRE]
]EG]

[EG[
[47] [[英語]]の [[first]] は 1[SUP[st]] と表記することもあります。
[[HTML]] では [CODE[1<sup>st</sup>]] となります。
]EG]

[EG[
[56] [[数式]]に使うことができます。 [SRC[>>33]]
[PRE(HTML code)[
<var>E</var>=<var>m</var><var>c</var><sup>2</sup>
]PRE]

;; [[MathML]] を使う[RUBYB[べき]@en[[[encourage]]]]ですが、
それほどのものでもなければ [CODE(HTMLe)@en[sup]] を使えます。 [SRC[>>33]]
]EG]

[EG[
[55] [[LaTeX]] の[[ロゴ]]の表現に使うのは不適切です。 [SRC[>>33]]
]EG]

[46] ... と[[仕様書]]にはありますが、[[固有名詞]]の表記 (や[[ロゴ]]) の場合、
それが装飾的なものなのか、意味に関わる本質的なものなのかの区別が困難ですし、
無理に区別する意味も薄いように思われます。

* 分類

[34] [[フロー内容]]、[[語句内容]]、[[触知可能内容]]です [SRC[>>33]]。

* 文脈

[35] [[語句内容]]を使える場所に置くことができます [SRC[>>33]]。

* タグ

[2] [[開始タグ]]、[[終了タグ]]とも[[必須]]です [SRC[>>33]]。

* 内容属性

[39] 
[FIG(short list)[
- [[大域属性]]
]FIG]

* 内容

[36] [[語句内容]]を[[内容]]とすることができます [SRC[>>33]]。

* DOM インターフェイス

[41] [[要素インターフェイス]]は、 [CODE(DOMi)@en[HTMLElement]] です。 [SRC[>>33]]

* レンダリング

[11] [[視覚UA]] では、普通 [CODE(CSS)[[[vertical-align]]: [[super]]]]
で[[レンダリング]]します。
[[文字]]の大きさが周りよりも小さ目になることもあります。

[15] [[上付き]]にすると[[文字]]の位置が[[行]]の本来の高さとずれるために、
[[利用者エージェント]]によってはその[[行]]だけ違った高さになってしまうことがあります。

[12] [[テキスト・ブラウザ]]では[[上付き]]に[[レンダリング]]できないのが普通ですが、
例えば [[w3m]] は直前に [CODE[^]] を挿入して[[上付き]]であることがわかるようにします。

[13] >>12 の方法だけでは、 [CODE(HTMLe)[sup]]
が入れ子になっている場合や [CODE(HTMLe)[sup]]
内の字数が多い場合などに[[利用者]]の混乱を招くかもしれませんから、
適宜[[色]]を変えるなどの他の方法も使う方が好ましいでしょう。

[14] 非[[視覚]]系の[[利用者エージェント]]では、
[CODE(HTMLe)[sup]] の[[レンダリング]]に工夫が必要です。
[[音声UA]] では[[言語]]と前後の文脈情報を利用して
[SAMP(HTML)[<[CODE(HTMLe)[[[span]]]] [CODE(XMLa)[[[xml]]:[[lang]]]]="[CODE(lang)[[[en]]]]">1<[CODE(HTMLe)[sup]]>st</[CODE(HTMLe)[sup]]></[CODE(HTMLe)[[[span]]]]>]]
を [Q[first]] と読み上げることもできるでしょうが、
一般の場合を考えると、 >>12
のように直前に少し間を置いて [Q[上付き]]
などと補うなどとなるでしょう。

[[#comment]]


** 例

[3] [SAMP(HTML)[E = mc<[CODE(HTMLe)[sup]]>2</[CODE(HTMLe)[sup]]>]]

HTML 4 仕様書に載っていた例です。これがフランス語だとは思えませんが:)

(数学用字系, 化学用字系なんてのを考えれば、まあ、許容範囲でしょうか。
[CODE(HTMLe)[sub]] 要素型の本来想定されていた適用対象の1つでもありますし。)

[4] [SAMP(HTML)[<[CODE(HTMLe)[SPAN]] [CODE(HTMLe)[lang]]="[CODE(lang)[[[fr]]]]">M<[CODE(HTMLe)[sup]]>lle</[CODE(HTMLe)[sup]]> Dupont</[CODE(HTMLe)[SPAN]]>]]

こちらは正真正銘、仏蘭西語。これも HTML 4 仕様書からです。

[5] 他には、たとえば英語の [SAMP[21[SUP[st]] century]]
を [SAMP(HTML)[21<[CODE(HTMLe)[sup]]>st</[CODE(HTMLe)[sup]]> century]] とするのも適当でしょう。

[6] 仏蘭西語の例:
[PRE(HTML)[
<h2>7. Pour une sant&#233; meilleure au 21<sup>e</sup> si&#232;cle</h2>
]PRE]

[7]
[CODE(HTMLe)[sup]] がよく使われるのは >>3
のような数学的な場面と >>4-5 のように省略形などの言語的慣習による場面
(他に、 [SAMP(HTML)[<[CODE(HTMLe)[sup]]>TM</[CODE(HTMLe)[sup]]>]] や 
[SAMP(HTML)[<[CODE(HTMLe)[sup]]>&[[reg]];</[CODE(HTMLe)[sup]]>]]
などが見られます。) のようです。

[18]
[[仏蘭西語]]の場合、省略形の後の部分が[[母音字]]だけを含むときは、必ず[[上付き]]にします。その他の場合は、[[上付き]]でも通常通りでも構いません。

必ず[[上付き]]にする例
[PRE(HTML example code)[
<abbr xml:lang="fr" title="compagnie" lang="fr">C<sup>ie</sup></abbr>
]PRE]

必ず[[上付き]]にする例
[PRE(HTML example code)[
<abbr xml:lang="fr" title="num&#233;ro" lang="fr">n<sup>o</sup></abbr>
]PRE]

[[上付き]]でも通常通りでも良い例
[PRE(HTML example code)[
<abbr xml:lang="fr">Mlle</abbr>
]PRE]

[PRE(HTML example code)[
<abbr xml:lang="en">M<sup>lle</sup></abbr>
]PRE]

;; 参考:
[CITE@en[Comments on 27 May 2005 Working Draft of XHTML 2]] 
<http://lists.w3.org/Archives/Public/www-html-editor/2005JulSep/att-0040/XHTML2_20050527_comments.html#chap_TextMod>

([[名無しさん]] [sage])

[19]
[[和蘭語]]の場合、
[PRE(HTML bad example code)[
<span xml:lang="nl" lang="nl">2<sup>de</sup></span>
]PRE]

のように[[上付き]]にされることがよくあるものの、本来は
[PRE(HTML example code)[
<span xml:lang="nl" lang="nl">2de</span>
]PRE]

のように通常通りにするべきだとされているものもあります。

([[名無しさん]] [sage])

[21]
[CITE@ja-JP[クライアントサイド イメージマップ - Weblog]] ([CODE[2007-08-14 21:00:00 +09:00]] 版) <http://ryus.s21.xrea.com/w/item/942>

>
[PRE(HTML example code)[
おかしい<sup>※</sup>けれど、
]PRE]

>
[PRE(HTML example code)[
<ul class="notes">
 <li><sup>※</sup> HTML 4.01 と XHTML 1.1 では、
]PRE]

([[名無しさん]])

[22]
[[脚注]]に用いた例

[PRE(HTML example code)[
<b>二人零和確定完全情報ゲーム</b>である<sup id="cite_ref-0" class="reference"><a href="#cite_note-0" title="">[1]</a></sup>。
]PRE]

[PRE(HTML example code)[
<ol class="references">
<li id="cite_note-0"><b><a href="#cite_ref-0" title="">^</a></b>
]PRE]

;; [CITE@ja[囲碁 - Wikipedia]] ([CODE[2008-06-06 18:13:15 +09:00]] 版) <http://ja.wikipedia.org/wiki/%E5%9B%B2%E7%A2%81>

([[名無しさん]])

[23]
[CITE@ja[123期 新入生アンケート]] ([CODE[2008-08-20 14:54:46 +09:00]] 版) <http://www.tomikou.net/tokshuu/enq/123/index.html#q8>

> 文武両道&loz;<sup>&loz;</sup>

> 文武両道&#9674;[SUP[&#9674;]]

([[名無しさん]])


[24]
[CITE[クレジットカード - シティ VISAカード ・ マスターカード CITI CARDS JAPAN]] ([TIME[2008-10-03 10:47:47 +09:00]] 版) <http://www.citibank.co.jp/ccsi/notice/amazon_service/popup.html>

>
[PRE(HTML bad example code)[
<td width="100%" valign="top"><font size="2" class="sml">ご入会いただいた際の特典としてご案内させていただきました2,000円キャッシュバック特典の適用は2008年12月15日をもって終了させていただきます。まだカード発行から1年が経過していらっしゃらないお客様はお早めにご利用ください。<br>
なお、2,000円キャッシュバックはカード発行から1年以内に、Amazon.co.jp<img src="../../imgs/r.gif" alt="" width="7" height="7" hspace="1" vspace="2" border="0">が販売する商品を購入された場合が対象となります。Amazonマーケットプレイス</font><font class="cap" size="1"><sup>TM</sup></font><font size="2" class="sml">でのご利用は対象外となりますのでご注意ください。</font></td>
]PRE]

[CODE(URI)[r.gif]] は「&#174;」。

[26] 
>フォローが殺到した理由には「平沢唯の元ネタ」として面白がられている側面もあるだろう<sup>※2</sup>

;; [CITE@ja[ASCII.jp:「私は平沢進だぞ。平沢唯じゃない」 本人に聞いてみた]] ([[四本淑三]] 著, [TIME[2009-12-16 23:58:16 +09:00]] 版) <http://ascii.jp/elem/000/000/482/482115/>

[27] 
[PRE(HTML code)[
$44<sup>.99</sup>
]PRE]

* 関連

[16] [[上付き]]の [CODE(HTMLe)[[[sup]]]] に対して、
[[下付き]]の [CODE(HTMLe)[[[sub]]]] があります。

[17] [[装飾]]のための似た [[CSS]] の指定として
[CODE(CSS)[[[vertical-align]]]] [[特性]]の値
[CODE(CSS)[[[super]]]] があります。

* 歴史

** HTML3

[74] 
[[NN2]] が [CODE[sub]], [CODE[sup]] に対応しました。 [[HTML 3.0]] 機能としていて、
ウェブサイトでは [[HTML 3.0]] 仕様書から引用して紹介していました。
(実装していないはずの [CODE[math]] [[要素]]への言及までコピペしてました。)

[75] 
タイミング的には [[HTML 2.1]] への追加とほぼ同時期で微妙ですが、おそらく
[[HTML 2.1]] 由来でなく [[HTML 3.0]] 由来でしょうね。

[20]
[[Classic Mozilla]] は [CODE(HTMLe)@en[[[sup]]]] の[[終了タグ]]''だけ''があるとそれ以降の文字が[[下付き]]になりました。
(大きさはそのまま。)

;; [[Netscape Navigator]] 4.8 で確認。
<https://suika.suikawiki.org/~wakaba/-temp/test/html/phrase/non-sup-2.html>

[FIG(data)[ [73] [[HTML要素概説]]

:[F[要素名]]:[CODE[sub]]
:[F[要素名]]:[CODE[sup]]
:日付:[TIME[1995-09-25]]
:説明:
[TIME[1995-09-25]]、
[[HTML 2.1]] 
に、
[CODE[sub]],
[CODE[sup]]
が追加された。
現行仕様である。
:出典:
[REFS[

-
[CITE@en[Internationalization of the Hypertext Markup Language]], 
[DATA(.author)[[[Franois Yergeau]]]],
[DATA(.author)[[[Gavin Thomas Nicol]]]],
[DATA(.author)[[[Glenn Adams]]]],
[DATA(,author)[[[Martin J. Duerst]]]],
[DATA(.status)[[[Internet Draft]]]],
[TIME(.published)[1995-09-25]],
[TIME[2024-08-16T04:10:13.000Z]] <https://datatracker.ietf.org/doc/html/draft-ietf-html-i18n-01>


]REFS]

]FIG]


** HTML4

[REFS[
- [8] [[HTML 4]]
<https://www.w3.org/TR/html4/struct/text.html#edef-SUP>
]REFS]

[37] [[内容]]は [CODE[%inline;]] を使えるとされていました。



** HTML もどき

[71] [[DTBook]] にもあります。

- [72] [CITE@en-US[DAISY ANSI/NISO Z39.86-2002 - The DAISY Consortium]], [TIME[2023-11-26T04:45:46.000Z]] <https://daisy.org/info-help/document-archive/archived-projects/daisy-ansi-niso-z39-86-2002-archived/>


* メモ

[25] [CITE@ja[都道府県の人口一覧 - Wikipedia]]
([TIME[2009-08-22 07:31:29 +09:00]] 版)
<http://ja.wikipedia.org/wiki/%E9%83%BD%E9%81%93%E5%BA%9C%E7%9C%8C%E3%81%AE%E4%BA%BA%E5%8F%A3%E4%B8%80%E8%A6%A7>

[28] [CITE[ncsa-mosaic/CHANGES at master · alandipert/ncsa-mosaic]]
( ([TIME[2014-04-07 05:26:21 +09:00]] 版))
<https://github.com/alandipert/ncsa-mosaic/blob/master/CHANGES#L57>

[29] [CITE[Welcome to Netscape Navigator Version 2.0]]
( ([TIME[2014-04-07 08:49:59 +09:00]] 版))
<http://web.archive.org/web/20030202175634/http://wp.netscape.com/eng/mozilla/2.0/relnotes/windows-2.0.html#Images>

[30] [[Google]] は検索結果の表示で [CODE(HTMLe)@en[[[sup]]]] を保持しているようです。 [TIME[2015-02-24T09:40:20.300Z]]

[FIG(quote)[
[FIGCAPTION[
[31] [CITE@ja-jp[通信用語の基礎知識 ダウンロード]]
([[通信用語の基礎知識編纂委員会]]著, [TIME[2016-07-20 17:47:44 +09:00]])
<http://www.wdic.org/download.shtml>
]FIGCAPTION]

> 通信用語<sup>等</sup>の基礎知識

]FIG]


[FIG(quote)[
[FIGCAPTION[
[32] [CITE@ja[物件マニア賃貸売買版 '''[''' 大阪 ''']''']]
( ([TIME[2016-10-05 14:41:40 +09:00]]))
<http://www.b-mania.jp/>
]FIGCAPTION]

> <strong class="tpn_layout">1R</strong>(<span class="tpn_size">35.64m&#178;</span>)</p>

]FIG]


[FIG(quote)[
[FIGCAPTION[
[44] [CITE[L10436]]
([TIME[2008-01-09 19:34:58 +09:00]])
<http://www.planalto.gov.br/ccivil_03/leis/2002/L10436.htm>
]FIGCAPTION]

> <p ALIGN="JUSTIFY" style="text-indent: 30px"><font face="Arial" size="2">Art. 2<u><sup>o</sup></u> Deve ser garantido, por parte do
> 

]FIG]


[FIG(quote)[
[FIGCAPTION[
[45] [CITE@ja[Aice5 - Wikipedia]]
([TIME[2017-01-01 14:46:01 +09:00]])
<https://ja.wikipedia.org/wiki/Aice5>
]FIGCAPTION]

> Aice[SUP[5]](アイス)は、日本の声優ユニット。

]FIG]


[FIG(quote)[
[FIGCAPTION[
[48] [CITE[Aice5とは - はてなキーワード]]
([TIME[2017-01-01 23:53:49 +09:00]])
<https://d.hatena.ne.jp/keyword/Aice5>
]FIGCAPTION]

> 「上付き5=[SUP[5]]」は、特殊文字として存在しない*2ため、
> 実際に表記する場合は、[SUP[5]]とsupタグを指定しなければならない。*3

]FIG]


[FIG(quote)[
[FIGCAPTION[
[49] [CITE@ja[Aice5(声優ユニット) - 声優データベース]]
([TIME[2017-01-01 23:54:29 +09:00]])
<http://lain.gr.jp/voicedb/unit/view/2>
]FIGCAPTION]

> 正式には「5」が上付き文字になる。

]FIG]


[FIG(quote)[
[FIGCAPTION[
[50] [CITE@ja[Aice5]]
([TIME[2017-01-01 23:56:01 +09:00]])
<http://king-cr.jp/artist/aice5/>
]FIGCAPTION]

> 「Aice<sup>5</sup> Final Party LAST Aice<sup>5</sup>レポート」

]FIG]


[51] [CITE@ja[Aice⁵ 結成10周年記念特設サイト]]
([TIME[2016-03-23 11:58:16 +09:00]])
<http://10th-anniversary.com/>

[52] [CITE@ja[Aice⁵(@10th_anniv)さん | Twitter]]
([TIME[2017-01-01 23:57:36 +09:00]])
<https://twitter.com/10th_anniv>

[FIG(quote)[
[FIGCAPTION[
[53] [CITE[本日22時第2回放送!ニコニコ公式生放送「たかはし智秋のLADY LUCK CLUB」が好評です! | Akiba.TV]]
([TIME[2017-01-01 23:58:11 +09:00]])
<http://akiba.tv/2503/>
]FIGCAPTION]

> ※「Aice5」の「5」は、正しくは上付き文字(5乗)表記です。

]FIG]


[54] [CITE@ja[発音表記用小書き漢字 - 世界の特殊文字ウィキ]]
([TIME[2017-01-10 00:33:27 +09:00]])
<http://seesaawiki.jp/w/qvarie/d/%c8%af%b2%bb%c9%bd%b5%ad%cd%d1%be%ae%bd%f1%a4%ad%b4%c1%bb%fa>

[FIG(quote)[
[FIGCAPTION[
[57] [CITE@ja[C3 -シーキューブ- - Wikipedia]]
([TIME[2017-03-22 18:14:42 +09:00]])
<https://ja.wikipedia.org/wiki/C3_-%E3%82%B7%E3%83%BC%E3%82%AD%E3%83%A5%E3%83%BC%E3%83%96->
]FIGCAPTION]

> C[SUP[3]] -シーキューブ-

]FIG]


[58] [CITE@ja[C3 シーキューブ公式(@C3_anime)さん | Twitter]]
([TIME[2017-03-23 23:41:01 +09:00]])
<https://twitter.com/C3_anime>

[59] [CITE@ja[C3 -シーキューブ-]]
([TIME[2017-03-23 23:41:40 +09:00]])
<http://king-cr.jp/special/c3/>

[60] [[バイエル符号]]

[61] [CITE@ja-jp[YBO²リリース記念特番! Vol.1 生放送 - 2017/11/16 20:00開始 - ニコニコ生放送]]
([TIME[2017-11-16 00:46:41 +09:00]])
<http://live.nicovideo.jp/watch/lv308518997?ref=qtimetable&zroute=index>

[62] [CITE@en[<sub> and <sup> in ATK / issue #121]]
([[jasonkiss]]著, [TIME[2018-02-07 06:13:53 +09:00]])
<https://github.com/w3c/html-aam/commit/2b72311f6eb103df98f24c5a7137504f71edce1b>

[63] [CITE@en[The sub and sup elements should be mapped for ATK · Issue #121 · w3c/html-aam]]
([TIME[2018-02-07 13:30:07 +09:00]])
<https://github.com/w3c/html-aam/issues/121>

[64] [CITE@ja[KOH+ - Wikipedia]]
([TIME[2018-02-23 19:13:08 +09:00]])
<https://ja.wikipedia.org/wiki/KOH%2B>

[FIG(quote)[
[FIGCAPTION[
[65] [CITE@ja[ラクスジェン・U6ターボ - Wikipedia]]
([TIME[2018-02-22 19:01:19 +09:00]])
<https://ja.wikipedia.org/wiki/%E3%83%A9%E3%82%AF%E3%82%B9%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%BBU6%E3%82%BF%E3%83%BC%E3%83%9C>
]FIGCAPTION]

> 装備面では「アクティブイーグルビュー[SUP[+]]」「サイドビュー[SUP[+]]」「ナイトビジョン[SUP[+]]」レーンキープシステム「LOWS[SUP[+]]」を備えたマルチメディアシステム「THINK[SUP[+]]Touch」を備え、iKEY[SUP[+]]と呼ばれるスマートキーシステムや電子式パーキングブレーキ(=EPB、M[SUP[+]]を含む)、本皮革シートなども用意。

]FIG]


[FIG(quote)[
[FIGCAPTION[
[66] [CITE@ja[オープンアクセス - Wikipedia]]
([TIME[2018-03-22 22:18:20 +09:00]])
<https://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%BC%E3%83%97%E3%83%B3%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9>
]FIGCAPTION]

> SCOAP[SUP[3]]

]FIG]


[67] [CITE@en[<sub> and <sup> in ATK / issue #121]]
([[jasonkiss]]著, [TIME[2018-02-07 06:13:53 +09:00]])
<https://github.com/w3c/html-aam/commit/2b72311f6eb103df98f24c5a7137504f71edce1b>

[68] [CITE@en[The sub and sup elements should be mapped for ATK · Issue #121 · w3c/html-aam]]
([TIME[2018-05-08 21:19:46 +09:00]])
<https://github.com/w3c/html-aam/issues/121>

[FIG(quote)[
[FIGCAPTION[
[69] [CITE@ja[昭憲皇太后 - Wikipedia]]
([TIME[2018-06-04 08:04:50 +09:00]])
<https://ja.wikipedia.org/wiki/%E6%98%AD%E6%86%B2%E7%9A%87%E5%A4%AA%E5%90%8E>
]FIGCAPTION]

> 中務少輔輔世[SUP[奉]]

]FIG]


[70] [CITE@ja[序数標識 - Wikipedia]]
([TIME[2018-10-31 21:07:14 +09:00]])
<https://ja.wikipedia.org/wiki/%E5%BA%8F%E6%95%B0%E6%A8%99%E8%AD%98>