HTML

HyperText Markup Language dfn element.

The <dfn> tag stands for the "definition element", and it specifies a term that is going to be defined within the content.

The nearest parent of the <dfn> tag must also contain the definition/explanation for the term.

dfn 要素

　dfn要素は、「definition」の略で定義語を表します。何らかの用語の意味を定義（解説）する際、文章中に出てくるその定義用語の部分に対してこの要素を使用します。定義用語が何度も出る場合には、最初の用語だけ <dfn>タグで囲むのが一般的です。定義語である以上、dfn要素を含んでいる段落や記述リストやセクションの中に、その説明を入れる必要があります。定義語の説明がないのであれば、dfn要素を使うべきではありません。

dfn要素のマークアップ例

<p>本コラムでは、<dfn id="html5">HTML5</dfn> を、W3Cの仕様である <cite>HTML5 A vocabulary and associated APIs for HTML and XHTML</cite> で規定されている範囲を表します。Web Workersや Web Storageのように、この仕様に書かれていない APIについては、<a href="dfn.html#html5">HTML5</a> に含まないものとして使います。</p>
<p><a href="dfn.html#html5">HTML5</a> は、当初、...</p>

dfn要素のマークアップ例のサンプル

本コラムでは、HTML5 を、W3Cの仕様である HTML5 A vocabulary and associated APIs for HTML and XHTML で規定されている範囲を表します。Web Workersや Web Storageのように、この仕様に書かれていない APIについては、HTML5 に含まないものとして使います。

HTML5 は、当初、...

　このように、dfn要素でマークアップした用語と同じ段落もしくはセクションに説明を入れて使うのが通例です。dfn要素に id属性をセットして、２度目以降に用語が登場する箇所では、a要素を使って最初に用語が登場した箇所へリンクすることで、同じ用語であることを明確に示すことができます。

　記述リストによる用語定義なら、次のようにマークアップします。

記述リストによる用語定義のマークアップ例


<section>
	<h2 class="smp">用語</h2>
	<dl>
		<dt><dfn id="url">URL</dfn></dt>
		<dd>リソースを特定するために使う文字列</dd>
		<dt><dfn id="valid-url">妥当な URL</dfn></dt>
		<dd><a href="http://www.w3.org/html/wg/href/draft">Web address 仕様</a>で定義された妥当な Web address</dd>
		<dt><dfn id="absolute-url">絶対 URL</dfn></dt>
		<dd><a href="http://www.w3.org/html/wg/href/draft">Web address 仕様</a>で定義された絶対 Web address</dd>
	</dl>
</section>

記述リストによる用語定義のマークアップ例のサンプル

用語

URL
リソースを特定するために使う文字列
妥当な URL
Web address 仕様で定義された妥当な Web address
絶対 URL
Web address 仕様で定義された絶対 Web address

dfn 要素の概要

カテゴリー
フロー・コンテンツ
フレージング・コンテンツ
コンテンツ･モデル
フレージング・コンテンツ
ただし、中に dfn要素を入れてはいけません。
利用可能な場所
フレージング・コンテンツが期待される場所
タグの省略
不可。開始と終了タグの両方が必要。
要素固有の属性
title属性
定義される用語の正式な名称を指定。
標準的なスタイル
dfn {
	font-style: italic;
}

dfn要素で表される定義語の解釈

　dfn要素で表す定義語は、次のいずれかのパターンでマークアップしなければいけません。

定義語のマークアップのパターン①


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

定義語のマークアップのパターン②


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

定義語のマークアップのパターン③


<dfn>HyperText Markup Language</dfn>

　これら 3パターンのいずれも、定義語として "HyperText Markup Language" を表すことになります。"HTML" ではない点に注意してください。セマンティクス上、dfn要素でマークアップされた定義語は、次の順番で解釈されます。

  1. dfn要素に title属性が指定されていれば、その値が定義語となります。
  2. dfn要素の中に title属性が指定された abbr要素だけがあれば、その title属性の値が定義語となります。
  3. 上記のいずれでもなければ、dfn要素の中のテキストが定義語となります。

　title属性は様々な要素で使用できる汎用的な属性ですが、dfn要素に title属性を指定した場合には特別な意味を持ちます。dfn要素の title属性には、定義される用語の正式な名称を指定します。また、<dfn>～</dfn>の直下に <abbr>タグを配置した場合には、<abbr>の title属性の値が定義される用語の正式な名称を表すことになります。

　dfn要素の祖先となる要素に title属性を指定しても、dfn要素には影響を与えません。

dfn要素に abbr要素とテキストを入れたマークアップ例


<dfn><abbr title="HyperText Markup Language">HTML</abbr>シリアライゼーション</dfn>

　このマークアップが表す定義語は "HTMLシリアライゼーション" となります。なぜなら、dfn要素の中に title属性が指定された abbr要素がありますが、それ以外にもテキストを含んでいるためです。そのため、前述の定義語の解釈の手順で言えば②には相当せず、③に相当することになります。したがって、この場合、dfn要素の中にあるコンテンツのテキスト部分だけを抽出したものが定義語として解釈されることになるのです。このテキスト部分とは、W3C DOM Level 3 で規定されている textContentIDL属性に相当するものです。