The <dfn> element is an inline element that marks the first occurrence of a technical term in the text as its defining instance.
ウェブページでは専門用語・略語・独自用語が頻出します。「用語が最初に登場した箇所」を <dfn> でマークアップすると、
HTML5 以降 <dfn> は「定義される語（“definition term”）」を示す完全なセマンティック要素となり、ページ品質とアクセシビリティの双方を底上げします。
HTML
<p>
<dfn id="api">API</dfn> とは、アプリケーションから機能を呼び出すための仕組みです。
</p><dfn> はインライン要素。
id を付与すると その語を指すアンカー になる（後述の aria-describedby 連携でも使用）。
HTML
<dfn id="progressive-web-app">Progressive Web App</dfn>語句全体を 1 つの <dfn> で括るのが正解。単語ごとに分割しない。
| バージョン | 変更点 | 備考 |
|---|---|---|
| HTML 4.01 | 登場。ただし「定義語」のみ規定で用途があいまい | |
| HTML5 | セマンティクスを明確化。「最初の出現箇所に用いる」ことを推奨 | WHATWG/WHATWG Living Standard |
| WHATWG LS | dfn 内のテキストが「定義される語」を構成する、と明示 | 定義参照 API 実装が進行中 |
歴史的に <dt> と混同されやすかった 点を押さえておくと理解が深まります。<dt> は 用語一覧 中の「見出し」、<dfn> は 本文中の定義箇所 です。
HTML
<p><dfn id="csr">CSR</dfn> はクライアント側でレンダリングを行う手法です。</p>2回目以降は <a href="#csr">CSR</a> にすると読者が戻れる
HTML
<dfn id="event-loop">イベントループ</dfn> とは…索引や自動リンク生成ツールと親和性が高い
HTML
<li><dfn id="svg">SVG</dfn> — ベクター画像のためのXMLベースフォーマット。</li>用語集ページでは <dfn> がそのまま見出し兼定義語
スクリーンリーダーは <dfn> を読み上げスタイルで特別扱いしない（2025年現在の主要 SR）。
しかし role="term" 相当のセマンティクスが伝わるため、将来の支援技術での強化に備えられる。
定義語へのリンクには aria-describedby で定義文を示すと親切。
HTML
<a href="#api" aria-describedby="api-def">API</a>
<p id="api-def"><dfn id="api">API</dfn> は …</p>色や下線だけでなく 視覚的アイコンやツールチップ で「定義語である」ことを示すと読みやすさ向上。
<dfn> 自体にランキングブーストはないが、“用語 - 意味” 検索でリッチリザルトの候補になりやすい。
定義語が <section> 要素見出し直下 に現れると、抽出精度が上がる傾向。
マークアップ品質改善 → Page Experience シグナル間接強化 → 検索評価向上。
| 要素 | 役割 | 違い |
|---|---|---|
<abbr> |
略語を示す。title 属性で展開可 |
定義文ではなく「略語の文字列」本体に使う |
<dt> |
定義リスト(<dl>) の項目見出し |
同じ「term」でも用語集形式。本文中は <dfn> |
<cite> |
著作物・作品名 | term ではない。混用しない |
<var> |
変数名 | プログラミングテキスト等で使用 |
<dfn> にする<span> か <a>。HTML
<!-- NG -->
<dfn>API とは、Application Programming Interface の略で …</dfn><dfn> で包む。説明文は外側。<dfn> と <dt> の混在を意識せず使うAPI とは、アプリケーションから機能を呼び出すための仕組みです。
HTML
<p>
<dfn id="api">API</dfn> とは、アプリケーションから機能を呼び出すための仕組みです。
</p>CSS
#api {
font-weight: bold;
font-style: normal;
text-decoration: underline dotted;
cursor: help;
}ツールチップライブラリと組み合わせると辞書アプリのような UX に。
多言語サイトでは「各言語ごとに 独立した <dfn> を用意」する。
HTML
<p lang="ja"><dfn id="api-ja">API</dfn> は…</p>
<p lang="en"><dfn id="api-en">API</dfn> is…</p>lang 属性を忘れると スクリーンリーダーが誤読 するので注意。
用語が共通でも 読者環境の言語 で最初に定義されていることが望ましい。
<dfn> でラップしているかid を付与し、リンクで再利用できるようにしたか<dt>・<abbr> との役割分担が明確か<dfn> は「本文中の用語の定義場所」をマークアップするインライン要素。id とリンクで再利用し辞書 UX を作る。