HTML

この記事では、文章中で初めて登場する専門用語やキーワードを「ここで定義する」と示すHTMLの<dfn>要素と、他のインライン要素との違いを初心者向けに説明します。

The <dfn> element is an inline element that marks the first occurrence of a technical term in the text as its defining instance.

dfn 要素

• 「用語を定義する」意味
• 基本構文と最小サンプル
  • 最小例
  • 複数語が定義対象の場合
• 仕様上の位置づけと歴史
• 典型ユースケース
  • 技術ブログ：用語初出時
  • 規格書・仕様書：専門用語の厳密定義
  • 辞書・用語集：定義文章そのもの
• アクセシビリティとスクリーンリーダー挙動
• SEO・検索エンジン最適化への影響
• 関連要素との使い分け
• よくある誤用とアンチパターン
• CSS・JS 連携テクニック
  • 視覚的な定義マーカー
• 国際化 (i18n) とローカリゼーション (l10n)
• ベストプラクティスチェックリスト
• まとめ

「用語を定義する」意味

ウェブページでは専門用語・略語・独自用語が頻出します。「用語が最初に登場した箇所」を <dfn> でマークアップすると、

• 読者は「ここが定義だ」と瞬時に認識できる
• 検索エンジンやスクリーンリーダーが文脈を理解しやすい
• JavaScript から機械的に「用語集」を生成できる

HTML5 以降 <dfn> は「定義される語（“definition term”）」を示す完全なセマンティック要素となり、ページ品質とアクセシビリティの双方を底上げします。

基本構文と最小サンプル

最小例

<p>
	<dfn id="api">API</dfn> とは、アプリケーションから機能を呼び出すための仕組みです。
</p>

<dfn> はインライン要素。

id を付与すると その語を指すアンカー になる（後述の aria-describedby 連携でも使用）。

複数語が定義対象の場合

<dfn id="progressive-web-app">Progressive Web App</dfn>

語句全体を 1 つの <dfn> で括るのが正解。単語ごとに分割しない。

仕様上の位置づけと歴史

歴史的に <dt> と混同されやすかった 点を押さえておくと理解が深まります。<dt> は 用語一覧 中の「見出し」、<dfn> は 本文中の定義箇所 です。

典型ユースケース

技術ブログ：用語初出時

<p><dfn id="csr">CSR</dfn> はクライアント側でレンダリングを行う手法です。</p>

2回目以降は <a href="#csr">CSR</a> にすると読者が戻れる

規格書・仕様書：専門用語の厳密定義

<dfn id="event-loop">イベントループ</dfn> とは…

索引や自動リンク生成ツールと親和性が高い

辞書・用語集：定義文章そのもの

<li><dfn id="svg">SVG</dfn> — ベクター画像のためのXMLベースフォーマット。</li>

用語集ページでは <dfn> がそのまま見出し兼定義語

アクセシビリティとスクリーンリーダー挙動

スクリーンリーダーは <dfn> を読み上げスタイルで特別扱いしない（2025年現在の主要 SR）。

しかし role="term" 相当のセマンティクスが伝わるため、将来の支援技術での強化に備えられる。

定義語へのリンクには aria-describedby で定義文を示すと親切。

<a href="#api" aria-describedby="api-def">API</a>
<p id="api-def"><dfn id="api">API</dfn> は …</p>

色や下線だけでなく 視覚的アイコンやツールチップ で「定義語である」ことを示すと読みやすさ向上。

SEO・検索エンジン最適化への影響

<dfn> 自体にランキングブーストはないが、“用語 - 意味” 検索でリッチリザルトの候補になりやすい。

定義語が <section> 要素見出し直下 に現れると、抽出精度が上がる傾向。

マークアップ品質改善 → Page Experience シグナル間接強化 → 検索評価向上。

関連要素との使い分け

よくある誤用とアンチパターン

すべての出現箇所を <dfn> にする

→ 定義は 初出部分 のみ。2回目以降は <span> か <a>。

「用語の説明」全体を括る

HTML

<!-- NG -->
<dfn>API とは、Application Programming Interface の略で …</dfn>

→ 定義“される語”だけを <dfn> で包む。説明文は外側。

<dfn> と <dt> の混在を意識せず使う

― ドキュメント構造が二重化し読み手が混乱。

CSS・JS 連携テクニック

視覚的な定義マーカー

<p>
	<dfn id="api">API</dfn> とは、アプリケーションから機能を呼び出すための仕組みです。
</p>

#api {
	font-weight: bold;
	font-style: normal;
	text-decoration: underline dotted;
	cursor: help;
}

ツールチップライブラリと組み合わせると辞書アプリのような UX に。

国際化 (i18n) とローカリゼーション (l10n)

多言語サイトでは「各言語ごとに 独立した <dfn> を用意」する。

<p lang="ja"><dfn id="api-ja">API</dfn> は…</p>
<p lang="en"><dfn id="api-en">API</dfn> is…</p>

lang 属性を忘れると スクリーンリーダーが誤読 するので注意。

用語が共通でも 読者環境の言語 で最初に定義されていることが望ましい。

ベストプラクティスチェックリスト

• 定義される語のみを <dfn> でラップしているか
• 初出箇所に限定しているか
• id を付与し、リンクで再利用できるようにしたか
• ツールチップや ARIA を使いスクリーンリーダー補足を行ったか
• <dt>・<abbr> との役割分担が明確か
• スタイルを当てつつフォントサイズやコントラストを十分確保したか

まとめ

• <dfn> は「本文中の用語の定義場所」をマークアップするインライン要素。
• 初出箇所に使い、id とリンクで再利用し辞書 UX を作る。
• アクセシビリティ・SEO 双方にプラスで、構造化文書の基礎。