<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>
定義語を解釈する仕組み
ユーザーエージェントは、次の優先順位で定義語を解釈します。
- dfn要素にtitle属性がある場合、その値が定義語だと解釈される。
- dfn要素にtitle属性がなく、かつ、子ノードがabbr要素だけの場合、title属性があれば、その値が定義語だと解釈される。
- いずれでもない場合、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>