[30] 定義語を示す dfn要素 を abbr要素や dt要素と一緒に使おう

<dfn>要素は、定義語を示す要素です。
定義語とは、ある用語を「xxxとはzzzzです」って説明する文章の中で、その「用語」（今の例ではxxx）のことを「定義語」といいます。
<dfn>要素はそれをマークアップしてあげる要素です。

定義語が略語の場合は、前回の<abbr>（略語を示す要素）を<dfn>の中に仕込みます。
また、ずいぶん前に出てきた <dt>（説明リストのタイトルの要素）が定義語である場合は、<dt> の中に <dfn> を仕込みます。（詳しくはこのあと説明します。）

使用する要素	<dfn> 〜 </dfn>

「dfn」は「definition」の略。definitionは「定義」という意味の名詞です。

<dfn>要素を使ってみよう

<dfn>要素はブラウザのデフォルトスタイルで、イタリックで表示されます。

まずはサンプルを見てみましょう。
「HTML」を <dfn>でマークアップしていますが、同時に <abbr>要素も使っているので、イタリックになり、下線も引かれています。

HTMLは、HyperText Markup Language の頭文字で、Webページなどを記述するためのマークアップ言語。W3Cによって標準化が行われている。

HTMLはこちら。

<p>
<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>は、HyperText Markup Language の頭文字で、
Webページなどを記述するためのマークアップ言語。W3Cによって標準化が行われている。</p>

定義語（このサンプルでは「HTML」って語）を <dfn> 〜 </dfn>で囲んでます。
この定義語は「略語」でもあるので、さらに <abbr>要素でも囲んでいます。

そして <abbr>要素の title属性で略称の正式名称を書いてます。
<abbr>要素で使うtitle属性には、略称の正式名称以外のものを書いてはいけないことになってます。

また、<abbr>要素なしで <dfn>要素単独の場合、<dfn>要素で使うtitle属性は、定義語以外のものを書いてはいけないことになってます。

<dfn>要素を使うときのお約束

<dfn>要素を使うときのお約束が2つあります。

・その定義語の定義（説明文）が必ず必要（当たり前ですね）
・その定義は <dfn>がある親要素の中に入ってなくちゃいけません

親要素は <p>要素や <dl>要素の場合が多いでしょう。その中に、<dfn>要素と その定義のための文章がセットで入っている必要があります。（遠くにあったら意味わからんから、これも当然ですね）

<dfn> を <dl>（説明リスト）の中で使ってみよう

dl要素（説明リスト）は、全体を <dl>要素で囲み、用語を<dt>に、その説明を<dd>に書くというものでしたね。

この <dl>要素、以前は「definition list (定義リスト) 」とされてたんですが、HTML5 から「description list（説明リスト）」という役割になったのだそうです。

そんなわけで、HTML5では <dt>要素は「定義語」を示さないので、<dt>の語句が定義語であるなら、<dt>の中に<dfn> を仕込んで定義語である事を示す必要があるんですって。

さらに、定義語が略語だったら<abbr>も入れ子にします。

サンプルを見てみましょう。

HTML

HyperText Markup Languageの頭文字で、Webページなどを記述するためのマークアップ言語。W3Cによって標準化が行われている。

HTMLはこちら。<dt>内に<dfn>と<abbr>も入れ子にした例です。

<dl>
 <dt><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn></dt>
 <dd>HyperText Markup Languageの頭文字で、Webページなどを記述するためのマークアップ言語。W3Cによって標準化が行われている。</dd>
</dl>

次回予告

次回は、ソースコードを示す <code>要素と、整形済みテキスト（改行やスペースをそのまま表示する）を示す <pre>要素を使ってみましょう。