HTML Living Standard/dfn

DFN要素

<dfn>要素は、文書内で用語や定義を表すために使用されます。特に、その用語が初めて出現する場所や、その定義を提示する文脈で利用されます。

定義

<dfn>は「定義 (definition)」の略です。
用語の意味や定義を示す箇所でマークアップされます。
ユーザーエージェント（ブラウザなど）は特別な視覚的な表現を行う場合がありますが、特定のスタイルが保証されるわけではありません。

使用方法

基本例

<p><dfn>HTML</dfn>は、ハイパーテキストを記述するためのマークアップ言語です。</p>

この例では、「HTML」という用語を定義するために<dfn>で囲んでいます。

定義のリンク付け

<dfn>要素は、title属性やid属性と組み合わせて詳細情報へのリンクを提供することができます。

<p><dfn id="html">HTML</dfn>は、ウェブページを構築するための標準的なマークアップ言語です。</p>
<p>詳細については<a href="#html">こちら</a>を参照してください。</p>

技術文書での使用例

複雑な技術文書では、用語とその定義を特定するのに役立ちます。

<p>以下は<dfn>API</dfn>（アプリケーション・プログラミング・インターフェイス）の定義です。</p>
<blockquote>
  <p>APIとは、異なるソフトウェアが通信するためのインターフェイスを指します。</p>
</blockquote>

属性

<dfn>要素には専用属性はありませんが、以下のグローバル属性を使用できます。

id: 用語を識別するために使用します。
class: 用語をスタイリングするために使用します。
lang: 用語が異なる言語で提供される場合に使用します。

<p><dfn id="css" class="highlighted-term">CSS</dfn>は、ウェブページのスタイルを指定するために使用されます。</p>

アクセシビリティ

スクリーンリーダーは<dfn>要素を適切に解釈し、定義として認識する場合があります。
明確な文脈で用語を使用し、ユーザーがその意味を理解できるようにしてください。
必要に応じて、ARIA属性を追加してアクセシビリティを向上させます。

注意事項

<dfn>要素は、その文脈で最も重要な用語に対して使用されるべきです。
用語が複数回出現する場合、最初の出現箇所でのみ使用するのが一般的です。
具体的なスタイリングはブラウザによって異なるため、CSSでカスタマイズすることを推奨します。

使用例

用語集の作成

<dfn>を使って用語集を作成できます。

<dl>
  <dt><dfn id="url">URL</dfn></dt>
  <dd>Uniform Resource Locatorの略で、ウェブページの住所を表します。</dd>

  <dt><dfn id="http">HTTP</dfn></dt>
  <dd>Hypertext Transfer Protocolの略で、ウェブ上のデータ通信に使用されるプロトコルです。</dd>
</dl>

CSSでのスタイリング例

dfn {
  font-style: italic;
  color: #007BFF;
}

このスタイルを適用すると、<dfn>要素がイタリック体で青色に表示されます。

利用シーン

辞書や用語集
技術文書や学術論文
定義を含むFAQやチュートリアル