SYNCER

SYNCER

<dfn要素> - 定義語

公開日:

dfn要素は、定義語を表す要素です。「AとはBのことである」という説明の、Aが定義語となります。dfn要素の最も近い祖先要素は、dfn要素の他に、定義語の説明を含んでいなければいけません。

概要

名前
dfn (Definition)
カテゴリー
Flow content
Phrasing content
Palpable content
配置できる場所
Phrasing contentが期待される場所。
コンテンツモデル
Phrasing content。ただし、別のdfn要素の祖先になってはいけない。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLElement
デフォルトのスタイル
dfn {
	font-style: italic;
}
仕様書
https://html.spec.whatwg.org/multipage/semantics.html#the-dfn-element

属性

title

title属性が指定された場合、その値がdfn要素が表す定義語だと解釈される。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

定義語とは?

dfn要素は、定義語(ある言葉)について説明する時に利用する要素です。下記は、JavaScriptの説明をする例です。定義語とは簡単に言うと「説明の対象」です。

HTML

<p><dfn>JavaScript</dfn>は、プログラム言語の1つです。クライアントサイドで動く、ウェブサイトの作成には欠かせない言語の1つ言えるでしょう。</p>

適用される範囲

dfn要素は最も近い祖先要素であるp要素section要素、またはdl要素内のname-value(名前と値のペア)のいずれかに適用されます。下記の例では、親要素であるp要素にかかります。そしてp要素の中身全体が、dfn要素で指定した定義語の説明というようにユーザーエージェントに解釈されます。

HTML

<!-- p要素の中身全体が、dfn要素の定義語に関する説明 -->
<p><dfn>JavaScript</dfn>は、プログラム言語の1つです。クライアントサイドで動く、ウェブサイトの作成には欠かせない言語の1つ言えるでしょう。</p>

そのため、dfn要素を持っていて、そのdfn要素を説明するテキストが同じ要素内にないようなマークアップは、ユーザーエージェントが上手く解釈できないでしょう。

HTML

<!-- 同じ親要素内に定義語の説明がないためNG -->
<p><dfn>JavaScript</dfn></p>

<!-- 下記は別要素なので、上記のdfn要素の定義語に関する説明とは解釈されない -->
<p>JavaScriptは、プログラム言語の1つです。クライアントサイドで動く、ウェブサイトの作成には欠かせない言語の1つ言えるでしょう。</p>

ただし、下記のように、dt要素にマークアップして、説明をdd要素で行なうことは間違いではありません。dfn要素は、最も近い祖先であるdl要素内のname-value(名前=dt要素と値=dd要素のペア)にも適用されるからです。

HTML

<dl>
	<!-- 最も近い祖先である、このname-valueに適用される -->
	<dt><dfn>JavaScript</dfn></dt>
		<dd>JavaScriptは、プログラム言語の1つです。クライアントサイドで動く、ウェブサイトの作成には欠かせない言語の1つ言えるでしょう。</dd>

	<!-- 他のname-valueには適用されない -->
	<dt>HTML</dt>
		<dd>HTMLは、HyperText Markup Languageの頭文字をとったものです。文書に意味付けを行なうために用います。</dd>
</dl>

定義語へのリンク

同じ定義語を同ページの違う場所、または別ページで用いる場合はdfn要素にリンクを付けて関連付けられます。ユーザーエージェントは、この言葉は、リンク先で説明されている定義語のことだと解釈するでしょう。

HTML

<!-- あるページで定義語の説明を行なう -->
<p><dfn id="target">JavaScript</dfn>は、プログラム言語の1つです。クライアントサイドで動く、ウェブサイトの作成には欠かせない言語の1つ言えるでしょう。</p>

HTML

<!-- 別の場所で同じ定義語を使う -->
<p>さて、<a href="#target">JavaScript</a>が最も便利だと感じることの1つは、ページを遷移することなくコンテンツを差し替えられる点です。Ajaxを…</p>

定義語を解釈する仕組み

ユーザーエージェントは、次の優先順位で定義語を解釈します。

  1. dfn要素にtitle属性がある場合、その値が定義語だと解釈される。
  2. dfn要素にtitle属性がなく、かつ、子ノードがabbr要素だけの場合、title属性があれば、その値が定義語だと解釈される。
  3. いずれでもない場合、dfn要素が含むテキストノード(textContent)が定義語だと解釈される。

1: dfn要素のtitle属性

例えば、dfn要素のテキストは略称でtitle属性には正式名称を指定した場合、title属性にした正式名称の方が定義語だと解釈されます。

HTML

<!-- "JavaScript"が定義語だと解釈される -->
<p><dfn title="JavaScript">js</dfn>は、クライアントサイドのプログラム言語のことだ。</p>

2: abbr要素のtitle属性

dfn要素のtitle属性がなく、かつ、dfn要素がabbr要素だけを含んでいる場合、title属性があれば、その値が定義語だと解釈されます。

HTML

<!-- "JavaScript"が定義語だと解釈される -->
<p><dfn><abbr title="JavaScript">js</abbr></dfn>は、クライアントサイドのプログラム言語のことだ。</p>

3: dfn要素のテキスト全体

いずれでもない場合は、dfn要素の中身が定義語だと解釈されます。

HTML

<!-- "JavaScript"が定義語だと解釈される -->
<p><dfn>JavaScript</dfn>は、クライアントサイドのプログラム言語のことだ。</p>

dfn要素がabbr要素以外を含んでいる場合、そのtitle属性ではなく、dfn要素のテキスト全体が定義語だと解釈される点にご注意下さい。例えば下記の場合、dfn要素は、abbr要素以外に言語というテキストを含んでいるため、js言語が定義語だと解釈されてしまいます。このHTMLを書いた人は、恐らく、JavaScriptを定義語だと解釈させたかったことでしょう。

HTML

<!-- "js言語"が定義語だと解釈される -->
<p><dfn><abbr title="JavaScript">js</abbr>言語</dfn>は、クライアントサイドのプログラムだ。</p>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】<dfn要素> - 定義語</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/dfn/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>dfn要素は、定義語を表す要素です。</p>

<p><dfn>the pillows</dfn>は、日本の3人組みの音楽バンドである。</p>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>