<dfn>定義を表す

<dfn>タグは、定義される用語(definition)を表す要素です。

<dfn>タグを使用する場合、<dfn>~</dfn>内に定義される用語を配置し、そのセクション内で説明を入れる必要があります。 (dfn要素の親となる段落記述リストセクションに、その用語の定義を入れます)

またdfn要素にtitle属性を指定する事で、その値を定義語とすることができます。 例えばdfn要素にtitle属性を指定した場合は、それが定義される用語となります。 dfn要素にtitle属性を指定せず、<dfn>~</dfn>内にtitle属性が付いたabbr要素がある場合は、そのtitle属性が定義される用語となります。 このどちらにも当てはまらない場合はdfn要素の内容(内部の文字列)が定義される用語となります。

またdfn要素に対してリンクすると、リンク元の用語を定義される用語の用例として関連付ける事なども可能です。

なお多くのブラウザではdfn要素の部分は斜体で表示されますが、Google Chrome14、Safari5.1では通常の文字で表示されるようです。

HTML5での変更点

HTML5のdfn要素は、HTML4.01から大きな変更点はありません。

書式

  • <dfn 属性="値">~</dfn> ……… 定義語を表す

属性

title="" 定義される用語を指定

使用した時の例

<p><dfn>CSS</dfn>は、ウェブページのスタイルを指定するための言語です。</p>

下記はtitle属性を指定した場合の例です。 どちらもtitle属性の値が定義用語となります。

<p><dfn title="Cascading Style Sheets">CSS</dfn>は、ウェブページのスタイルを指定するための言語です。</p>

<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>は、ウェブページのスタイルを指定するための言語です。</p>

下記はdfn要素に対してリンクを設定した場合の例です。 この場合リンク元の内容が定義される用語の用例として関連づけられます。

<p><dfn id="sample">CSS</dfn>は、ウェブページのスタイルを指定するための言語です。</p>
<!-- 省略 -->
<p>ようやく私も<a href="#sample">CSS</a>を覚える事ができました!嬉しいな</p>

ブラウザ上の表示例

CSSは、ウェブページのスタイルを指定するための言語です。

CSSは、ウェブページのスタイルを指定するための言語です。

CSSは、ウェブページのスタイルを指定するための言語です。

CSSは、ウェブページのスタイルを指定するための言語です。

ようやく私もCSSを覚える事ができました!嬉しいな

対応ブラウザなどのデータ

形式 <dfn>~</dfn> カテゴリ フローコンテンツ, フレージングコンテンツ, パルパブルコンテンツ
親要素 フレージングコンテンツが期待される場所 子要素 フレージングコンテンツ
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~