文章の中に略語が出てきたとき正式名称を添えたい、専門用語が初めて登場する場所を示したい、あるいは「m²」や「H₂O」のように小さな上付き・下付きの文字を表したい——こうした「文字の意味づけ」を担うのが HTML の abbr・dfn・sup・sub という4つのインライン要素です。この記事では、それぞれがどんな意味を持ち、どう書くのか、見た目を整える CSS、そして見た目だけを目的に使ってはいけない理由までを、実際の表示を見ながら解説します。
まずは4つの要素が実際にどう表示されるかを、次のデモで確認してみましょう。CSS タブを切り替えると、装飾の指定も見られます。
<p>
<abbr title="HyperText Markup Language">HTML</abbr> と
<abbr title="Cascading Style Sheets">CSS</abbr> はWeb制作の基本です。
</p>
<p>
<dfn>レスポンシブデザイン</dfn>とは、画面幅に応じて見た目を変える設計手法のことです。
</p>
<p>水の化学式は H<sub>2</sub>O、二酸化炭素は CO<sub>2</sub> と書きます。</p>
<p>この部屋の広さは 12m<sup>2</sup>、計算式は 2<sup>10</sup> = 1024 です。</p>
abbr[title] {
text-decoration: underline dotted; /* 略語に点線の下線を付ける */
cursor: help; /* マウスを乗せると「？」カーソルに */
}
dfn {
font-style: italic;
font-weight: bold;
}
目次
abbr で略語に正式名称を添える
abbr は abbreviation（略語）の略で、頭字語や略称をマークアップするための要素です。最大の役割は、title 属性に正式名称を書いておけることです。多くのブラウザでは、title を付けた abbr にマウスを乗せると、その正式名称がツールチップとして表示されます。
<p>
当サイトは <abbr title="World Wide Web Consortium">W3C</abbr> の
仕様に準拠しています。
</p>title に正式名称を持たせておくと、視覚的なツールチップだけでなく、スクリーンリーダーが正式名称を読み上げられる場合もあり、アクセシビリティの面でも意味があります。なお title はマウス操作が前提のツールチップで、スマートフォンでは表示されないため、初出のときは本文中にも正式名称を書いておくと、すべての読者に伝わります。
見た目の面では、ブラウザによって title 付きの abbr に点線の下線が付くことがあります。表示を統一したい場合は、デモにもあった text-decoration: underline dotted を指定して、略語であることが分かるようにするのがおすすめです。
dfn で用語を定義する
dfn は definition（定義）の略で、その用語がその場で定義されていることを示す要素です。文章の中で専門用語を初めて登場させ、その意味を説明するとき、定義される側の用語を dfn で囲みます。「ここがこの言葉の説明をしている箇所だ」という目印になります。
<p>
<dfn>フレックスボックス</dfn>とは、要素を1次元（横一列または縦一列）に
並べて配置するための CSS のレイアウト方式です。
</p>ポイントは、dfn で囲むのは「定義される用語そのもの」だという点です。説明文の全体ではなく、説明の対象になっている言葉だけを囲みます。多くのブラウザでは dfn の中身が斜体（イタリック）で表示されますが、これはあくまで初期スタイルなので、CSS で自由に変更できます。
sup で上付き文字、sub で下付き文字を表す
sup は superscript（上付き文字）、sub は subscript（下付き文字）の略です。それぞれ、基準の文字より少し上、または少し下に、小さく表示される文字を表します。どちらも「見た目を小さくする」ためではなく、上付き・下付きであること自体に意味がある場面で使います。代表的な用途は次のとおりです。
| 要素 | 主な用途 | 例 |
|---|---|---|
sup（上付き） | 累乗・指数、序数の接尾辞、脚注番号 | x², 5th, 注1 |
sub（下付き） | 化学式の原子の数、数学の添字 | H₂O, CO₂, an |
<p>円の面積は <var>r</var><sup>2</sup> × π で求められます。</p>
<p>光合成では CO<sub>2</sub> と H<sub>2</sub>O から酸素が作られます。</p>
<p>詳しくは後述します<sup><a href="#note1">1</a></sup>。</p>3つ目の例のように、脚注番号を sup でマークアップし、その中にリンクを入れて注釈へ飛ばす、という書き方もよく使われます。化学式や数式が出てくる解説記事では、sub と sup を正しく使うだけで、内容の正確さと読みやすさが大きく上がります。
見た目だけのために使ってはいけない
これら4つの要素に共通する注意点は、見た目を変える目的だけで使わないことです。HTML の要素は「その部分が何であるか（意味）」を表すためのもので、見た目は CSS が担当します。意味と合わない使い方をすると、検索エンジンや支援技術が内容を正しく解釈できなくなります。
文字を小さくしたいだけなら sup・sub は使わない
「文字を少し小さく、上の方に表示したい」という見た目の理由だけで sup を使うのは誤りです。sup・sub は累乗や化学式のように、上付き・下付きであること自体が情報の一部であるときに使う要素です。単に小さく表示したいだけなら、CSS の font-size や vertical-align で調整します。
斜体にしたいだけで dfn を使わない
同様に、文字を斜体にしたいからといって dfn を使うのも避けましょう。dfn は「ここで用語を定義している」という意味を持つ要素です。単に強調や斜体にしたいだけなら em や i、装飾は CSS の font-style を使い、要素の意味と表示の目的を一致させるのが基本です。
まとめ
abbr・dfn・sup・sub は、文章中の言葉や記号に正しい意味を与えるためのインライン要素です。要点を振り返ります。
abbrは略語をマークアップし、title属性に正式名称を添えられるdfnは用語が「その場で定義されている」ことを示し、定義される語だけを囲むsupは上付き文字（累乗・脚注番号など）、subは下付き文字（化学式の数など）を表す- 初期スタイル（点線の下線、斜体、文字の上下）はあくまで既定で、CSS で自由に変えられる
- 見た目を変える目的だけでこれらを使わない。装飾は CSS の役割
これらは派手な要素ではありませんが、適切に使うことで文書の意味が明確になり、検索エンジンや支援技術にも内容が正しく伝わります。略語や化学式、注釈が出てきたら、ふさわしい要素を選んでマークアップする習慣をつけてみてください。