<dfn></dfn>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 フレージング・コンテンツ(ただし、dfn要素は含められない)

dfn要素は、定義される用語を表します。

用語の意味を説明する際に、その用語の部分に対してこの要素を使用します。


<dfn>定義される用語を表します</dfn>

属性
グローバル属性(この要素上では、title属性が特別な意味を持ちます)
title="" 正確な定義用語 テキスト 任意のテキスト

dfn要素を使用する場合は、dfn要素の直近祖先となる段落セクション、または記述リストの同じグループ内に、その用語に対する定義も含めなければなりません。

次の例では、親の段落内に用語の定義を含めています。

<p><dfn>HTML</dfn>は、Webページを作成するためのマークアップ言語です。</p>

次の例では、記述リストの同じグループ内(dd要素)に用語の定義を含めています。

<dl>
<dt><dfn>HTML</dfn></dt>
<dd>Webページを作成するためのマークアップ言語です。</dd>
</dl>
  • 定義を伴わない用語の場合は、この要素ではなくi要素b要素などを(状況に合わせて)使用します。

title属性について

dfn要素にtitle属性が指定されている場合は、そのtitle属性の値が定義用語となります。次の例ではHyperText Markup Languageが定義用語になります。

<dfn title="HyperText Markup Language">HTML</dfn>

dfn要素にtitle属性がなく、内容にtitle属性が指定された1つのabbr要素のみが置かれてる場合には、そのtitle属性の値が定義用語となります。次の例でもHyperText Markup Languageが定義用語になります。

<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>

上記以外の場合は、dfn要素内のテキストが定義用語となります。次の2つの例ではHTML要素が定義用語になります。

<dfn>HTML要素</dfn>
<dfn><abbr title="HyperText Markup Language">HTML</abbr>要素</dfn>

dfn要素へのリンク

dfn要素に対してリンクすると、リンク元の内容(a要素内のテキスト)が定義用語の用例として関連付けられることになります。これにより、定義への参照が容易になります。

<p><dfn id="html">HTML</dfn>は、Webページを作成するためのマークアップ言語です。</p>
...

<p>来月から<a href="#html">HTML</a>の勉強を始めることにしました。</p>

要素のデフォルトスタイル

一般的なブラウザでは、この要素内のテキストはイタリック体で表示されます。

  • フォントによっては、イタリック体で表示されない場合があります。
定義される用語を表します Definition
旧HTMLからの変更点
  • HTML5:定義内容の記述位置や、title属性の扱いなどが厳密になりました。

使用例


<p><dfn>HTML</dfn>は、Webページを作成するためのマークアップ言語です。</p>

表示例

HTMLは、Webページを作成するためのマークアップ言語です。

title属性を指定した例

<p><dfn title="HyperText Markup Language">HTML</dfn>は、Webページを作成するためのマークアップ言語です。</p>

<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>は、Webページを装飾するためのスタイルシート言語です。</p>

表示例

HTMLは、Webページを作成するためのマークアップ言語です。

CSSは、Webページを装飾するためのスタイルシート言語です。

  • 用語のCSSに付けられる下線は、abbr要素のデフォルトスタイルによるものです。
dfn要素にリンクした例

<p><dfn id="dfn">dfn要素</dfn>は、定義される用語を表します。</p>
...

<p>ということで、以上で<a href="#dfn">dfn要素</a>に関する解説を終わります。</p>

表示例

ということで、以上でdfn要素に関する解説を終わります。