この記事の要点

<dfn>（Definition）は用語の定義箇所を示す HTML インライン要素 使用例: <dfn>HTTP</dfn> とは Hypertext Transfer Protocol のことです デフォルトスタイルはイタリック（font-style: italic） title 属性 や aria-describedby で定義文を補足できる <abbr>（略語）は別物: 略語の展開を示す。dfn は用語の最初の定義箇所

dfn 要素とは

Definition Element。文中で用語が定義される箇所を意味的にマークアップするインライン要素です。

<p>
  <dfn>HTTP</dfn> は Web 上で HTML 等のリソースを転送する
  プロトコルです。サーバとクライアントが通信する際の規則を定めています。
</p>

<p>
  <dfn>REST</dfn>（Representational State Transfer）は Web API の
  設計原則の 1 つです。
</p>

<p>
  <dfn title="Cascading Style Sheets">CSS</dfn> で Web ページの
  見た目を定義できます。
</p>

デフォルトの見た目

ブラウザのデフォルト CSS は次のとおり:

/* ブラウザ標準 (UA stylesheet) */
dfn {
    font-style: italic;
}

カスタマイズも自由:

dfn {
    font-style: normal;
    font-weight: bold;
    background: #fffbea;
    padding: 0 0.2em;
    border-bottom: 2px solid #f4c430;
    cursor: help;
}

/* hover で title 属性を強調 */
dfn[title]:hover {
    background: #fff3e0;
}

意味論: なぜ <b> や <em> ではなく <dfn> なのか

HTML5 では「意味（semantic）に応じたタグ」を使うことが推奨されます:

タグ	意味	使い所
<dfn>	用語が定義される箇所	「○○とは××です」の○○
<em>	強調（emphasis）	文の中で語調を上げる
<strong>	重要性	「警告: 必ず読んで」等
<b>	装飾的な太字（意味なし）	製品名など慣習的に太字
<i>	装飾的なイタリック	外国語、思考表現
<abbr>	略語の展開	「<abbr title="HyperText Markup Language">HTML</abbr>」

abbr 要素との使い分け

<!-- ❌ 混同しやすい -->
<p>
  <abbr title="HyperText Transfer Protocol">HTTP</abbr> は
  Web の通信プロトコルです。
</p>

<!-- ✅ 用語の最初の定義箇所 → dfn -->
<p>
  <dfn>HTTP</dfn> は HyperText Transfer Protocol の略で、
  Web 上で HTML 等のリソースを転送するプロトコルです。
</p>

<!-- ✅ 同じ語が後で出てくるとき → abbr で略語と分かる形 -->
<p>
  <abbr title="HyperText Transfer Protocol">HTTP</abbr> リクエストには
  GET と POST 等の種類があります。
</p>

<!-- 組み合わせも可 -->
<p>
  <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> は
  Web ページの見た目を制御します。
</p>

aria-describedby で定義文を関連付け

用語と定義文が離れている場合、ARIA で紐付けできます:

<p>
  Web の仕組みを学ぶには
  <dfn aria-describedby="def-http">HTTP</dfn> の理解が必要です。
</p>

<aside>
  <h3 id="def-http">HTTP とは</h3>
  <p>Web 上でリソースを転送するためのプロトコル...</p>
</aside>

<!-- スクリーンリーダーが「HTTP（定義: Web 上でリソースを...）」のように読む -->

title 属性の活用

<p>
  <dfn title="アプリケーション プログラミング インタフェース">
    API
  </dfn>
  は他のソフトウェアから機能を呼び出すための窓口です。
</p>

<!-- マウスホバーで title が tooltip 表示 -->
<!-- ただしモバイル / キーボードユーザは見えないので
     本文中にも定義を書くのが推奨 -->

用語集ページでの活用

<dl class="glossary">
  <dt><dfn>API</dfn></dt>
  <dd>アプリケーション間で機能を呼び出すための仕組み...</dd>

  <dt><dfn>REST</dfn></dt>
  <dd>HTTP を用いた Web API の設計原則...</dd>

  <dt><dfn>GraphQL</dfn></dt>
  <dd>Facebook 発のクエリ言語。REST に代わる API 設計...</dd>
</dl>

<dt>（用語）と組み合わせると、用語集ページとして機械可読になります。

id 属性とアンカーリンク

dfn に id を付けると、用語の定義箇所へ直接リンクできます:

<!-- 定義箇所 -->
<p>
  <dfn id="dfn-rest">REST</dfn> は Web API の設計原則です。
</p>

<!-- 別ページや本文中からリンク -->
<p>
  詳細は <a href="/glossary.html#dfn-rest">REST の定義</a> をご覧ください。
</p>

<!-- スクロール位置調整 -->
<style>
  dfn[id] {
    scroll-margin-top: 80px;
  }
</style>

Wikipedia 風の活用

Wikipedia の各記事の冒頭は <b>（実装上）で太字表示されますが、これは「用語の定義」を示すパターンの典型です。HTML5 の意味論に従うなら <dfn> の方が適切:

<article>
  <h1>レーザー</h1>
  <p>
    <dfn>レーザー</dfn>（laser）は、
    <q>Light Amplification by Stimulated Emission of Radiation</q>
    の頭字語で、誘導放出による光の増幅を意味する...
  </p>
</article>

JavaScript で動的に用語集を生成

// ページ内のすべての dfn を集めて目次を作る
const terms = document.querySelectorAll('dfn');
const toc = document.querySelector('#term-index');

terms.forEach(dfn => {
  if (!dfn.id) dfn.id = 'dfn-' + dfn.textContent.toLowerCase().replace(/\s+/g, '-');
  const li = document.createElement('li');
  li.innerHTML = `<a href="#${dfn.id}">${dfn.textContent}</a>`;
  toc.appendChild(li);
});

SEO とアクセシビリティ

• SEO: 検索エンジンは「この語の定義はここ」という意味情報として活用する可能性。リッチスニペット候補
• スクリーンリーダー: 一部の SR は <dfn> を「定義」と読み上げる。aria-describedby と組み合わせると効果的
• Reader Mode: ブラウザのリーダーモードで強調表示されることがある

FAQ

Q: 用語が同じページに何度も出てくる場合、毎回 <dfn> でマークアップする？
A: いいえ。最初に定義する箇所だけ <dfn>、それ以降は通常テキストまたは <abbr> です。

Q: イタリック表示が嫌い
A: CSS で dfn { font-style: normal; } に上書き OK。意味論は維持されます。

Q: <dfn> 自体に title 属性を付けるとき、ホバー表示の挙動は？
A: 通常のツールチップ表示。title が長い場合は aria-describedby で本文中の説明と紐付ける方が a11y 的に良いです。