ホームページを作成していて、
「数字の右上に小さい文字で乗数を書きたい」
「化学式のようにアルファベットの右下に小さい文字を入れたい」。
ホームページでは、文字の一部だけを右上や右下に小さい文字を表示したい場面が意外とよくあります。しかし、単純に文字サイズを小さくするだけでは、上付き文字や下付き文字を正しく表現することはできません。
例えば、次のような表記です。
数式の a²（右上の小さい文字）
面積の単位 10m²（右上の小さい文字）
化学式の H₂O（右下の小さい文字）
二酸化炭素の CO₂（右下の小さい文字）
脚注の 本文¹
このような表現は、HTMLの sup要素（上付き文字） と sub要素（下付き文字） を使うことで簡単に実現できます。
sup要素は文字を右上に小さい文字を表示したいときに使用し、sub要素は文字を右下に小さい文字を表示したいときに使用します。どちらも現在のHTML Living Standardで正式に定義されている要素で、今のホームページ制作でも広く利用されています。
ここでは、ホームページHTMLで上付き文字・下付き文字を表示する方法をわかりやすく解説します。
sup要素・sub要素の基本的な使い方から、コピペできるコード例、よくある使用例、利用時の注意点まで紹介しますので、HTML初心者の方もぜひ参考にしてください。
「上付き文字」「下付き文字」とは？
そもそも「上付き文字」「下付き文字」とは、通常のテキスト行よりも少し位置をずらして表示する小さい文字のことです。
・上付き文字： 文字の右上に表示される（例：10²、※1）
・下付き文字： 文字の右下に表示される（例：H₂O）
ホームページ作成の現場では、数学の数式や、理科の化学式、文章の注釈（脚注）を入れるときによく使われます。
今の時代のマメ知識（HTML Living Standard）
昔のHTML（HTML5やそれ以前のバージョン）のテキストでは、これらは単に「文字を右上や右下に小さく表示するためのタグ」と説明されていることが多くありました。
しかし、現在の最新ルール（HTML Living Standard）では、ただの飾りではなく「その位置に表示されることに、意味や根拠があるときだけ使う」という重要なルールに進化しています。
HTMLで上付き文字(右上の小さい文字)の書き方<sup></sup>
文字の右上に上付き文字を入れたいときは、右上に表示したい小さい文字を、<sup> と </sup> で挟みます。
<sup> は superscript（上付き） の略で、文字を右上に小さく表示します。
【HTMLコード例】
<p>10の2乗の表示の仕方は、10<sup>2</sup> です。</p>
<p>縦1㎞、横1㎞の土地の面積は、1㎞<sup>2</sup> です。</p>
<p>縦、横、高さがそれぞれ2㎝の立方体の体積は、8㎝<sup>3</sup> です。</p>
【表示結果】
 |
閉じタグ（</sup>）を書き忘れると、それ以降の文章がすべて右上に小さくなってしまうので注意してください。
HTMLで下付き文字(右下の小さい文字)の書き方<sub></sub>
文字の右下に下付き文字を入れたいときは、右下に表示したい小さい文字を、<sub> と </sub> で挟みます。
<sub> は subscript（下付き） の略で、文字を右下に小さく表示します。
【HTMLコード例】
<p>水の元素記号は、H<sub>2</sub>O です。</p>
<p>数字の添え事例：X<sub>1</sub>、X<sub>2、X<sub>3</sub></p>
<p>最新の調査結果によると、世界の人口は増加傾向にあります<sub>※1</sub>。</p>
【表示結果】
|
商標™・登録商標®・著作権© の正しいHTML表記
ホームページ制作や EC サイト制作では、商品名やサービス名の横に 商標（™）・登録商標（®）・著作権（©） を正しく表示する必要があります。
しかし、
・「どれに <sup>（上付き）を使うのか？」
・「著作権マークは上付きにするの？」
・「HTML Living Standard ではどう書くのが正しいのか？」
と迷う人が多いです。
結論はこうです：
・商標（™） → <sup> を使う（上付き）
・登録商標（®） → <sup> を使う（上付き）
・著作権（©） → <sup> を使わない（上付きにしない）
・著作権表示全体は <small> で囲むのが現代の正しいルール
商標（™）は sup を使う
商標（™）は 上付き文字で表すのが国際的な印刷慣例。
HTML でも <sup> を使うのが正しい使い方になります。
【HTMLコード例】
【表示結果】
 |
登録商標（®）も sup を使う
登録商標（®）も 上付き文字コード<sup>で表すのが正しい使い方になります。
【表示結果】
 |
著作権マーク（©）には sup を使わない.<small>で囲むのが正しいルール
著作権マーク（©）は上付きにしません。
理由は：
・© は 文章の一部として扱う記号
・商標のように「右上に小さく表示する」という印刷慣例がない
・国際的にも © は 通常の文字サイズ・通常の位置 で表示するのが正しい
・W3C の仕様でも © を sup にする推奨は一切ない
です。
HTML Living Standard では、免責事項・著作権表示・法的制約などは <small> 要素で表す と定義されています。
【HTMLコード例】
【表示結果】
 |
文字をただ小さくしたいだけの時は使わない
だれもがやってしまいがちなNG例を紹介します。
NGな使い方
・お店のロゴの文字バランスを整えるために、一部の文字を<sup>で上にずらす。
・単に「ちいさい文字」にしたいからという理由で、意味もなく<sub>を使う。
これらは現在のホームページ作成ルールでは非推奨となっています。
正しい使い分け
・ただ文字を小さくしたい時： <small> タグを使うか、CSSの font-size で調整する。
・数式・化学式・注釈の時：<sup> や <sub> タグを使う。
「見た目を変えたいだけならCSS」、「配置そのものに数式などの意味があるならHTMLタグ」と覚えておきましょう。
CSSで無理に作らず、sup/sub を使う理由
HTMLでは、意味を持つタグ（セマンティクス）を使うことが重要です。
CSS の vertical-align: super や vertical-align: sub を使えば、見た目だけは再現できますが、
・スクリーンリーダーが正しく読み上げない
・検索エンジンが意味を理解しにくい
・コードが複雑になる
・添付テキストでも「スタイリング目的で使うべきではない」と明記されている
といった問題があります。
複雑な数式は MathMLで
MathML（マスエムエル）は、Mathematical Markup Language の略で、HTML と同じ W3C が策定した数学の式を「見た目」ではなく 意味構造（セマンティクス） として記述するためのマークアップ言語です。
検索エンジンに“数学を正しく表現” しますので、HTML の <sup> や <sub> では表現しきれない 分数・ルート・行列・積分記号・複雑な式の構造 を、意味を保ったまま正確に書けるのが特徴です。
HTML の <sup> や <sub> は便利ですが、
・分数
・ルート
・行列
・積分・微分
・多段の指数や添字
・数式の意味を厳密に伝えたい
のような場合、
こうした式を HTML だけで書くと、見た目が崩れたり、アクセシビリティが低下します。
MathML は、数学の構造をそのまま表現できる ため、スクリーンリーダーにも正しく読み上げられ、検索エンジンにも意味が伝わります。
