catnose
catnose
HTMLの<dfn>とは、定義語（定義されている用語）を表すタグです。<dfn>は用語だけを表すので定義文（用語の説明） を合わせて書く必要があります。
<p><dfn>コードキッチン</dfn>は、Web制作の「あれどうやって作るの？」を料理レシピのように探せるサービスです。</p>
✍️「dfn」は「定義」を意味する「definition」の略です。
dfnタグの使い方
<dfn>は、基本的に以下のいずれかの中で使います。
定義文を含める要素
- 段落（
<p>） - 説明リスト（
<dl>・<dt>・<dd>） - セクション（
<section>）
👆また、これらの中に定義文（定義の説明）も書くことになります。
段落での使い方
<p><dfn>コードキッチン</dfn>は、Web制作の「あれどうやって作るの？」を料理レシピのように探せるサービスです。</p>
👆<p>の中に<dfn>を含める形で使います。「コードキッチン」が定義する用語で、その他の部分が用語の定義文の役割をしています。
説明リスト（dl・dt・dd）での使い方
<dl>
<dt><dfn>HTML</dfn></dt>
<dd>ハイパーテキストを記述する。</dd>
<dt><dfn>CSS</dfn></dt>
<dd>HTMLをどのように装飾するか指示する。</dd>
</dl>
👆HTMLの説明リストでは、<dt>で用語を、<dd>で説明文を表します。<dfn>を使わなくても意味は成り立ちますが、用語を<dfn>に含めることで「定義語であること」が明確になります。辞書のようなものを作るときに、合わせて使うと良いでしょう。
最も近い祖先の「段落」「説明リスト」「セクション」に定義文を入れる
<dfn>には、少し分かりづらいルールがあります。それは「最も近い祖先である段落（<p>）、説明リスト（<dl>）、セクション（<section>）に定義文を含まなければならない」ということです。
自身を含む要素のことです。1つの要素に対して、複数の「祖先」が存在します。
具体的に例を見てみるのが良いでしょう。
<p><!-- ←dfnにとっての親=祖先 -->
<dfn>用語</dfn>
</p>
👆<dfn>の親要素は<p>です。親は、祖先の1つです。
<p><!-- ←dfnにとっての祖先 -->
<span><!-- ←dfnにとっての祖先 -->
<dfn>用語</dfn>
</span>
</p>
👆<dfn>の親は<span>です。<p>は親の親なので、こちらも祖先です。
<h2>○○</h2><!-- ←🙅dfnの祖先ではない -->
<p><!-- ←dfnにとっての祖先 -->
<span><!-- ←dfnにとっての祖先 -->
<dfn>用語</dfn>
</span>
</p>
👆<dfn>は<h2>には含まれていないので、<h2>は<dfn>の祖先ではありません。
具体的に「正しい使い方」と「間違った使い方」を見てみるのが良いでしょう。
😊正しい使い方
<p><!-- ←最も近い祖先の段落-->
<span>
<dfn>用語</dfn>
</span>
定義文
</p>
👆<dfn>の親要素は<span>ですが、親の親（＝祖先）は<p>です。これが「最も近い祖先である段落」なので、この中に用語の定義文を入れればOKです。
😊正しい使い方
<section><!-- ←最も近い祖先のセクション-->
<h1>
<dfn>用語</dfn>
</h1>
<p>定義文</p>
</section>
👆<dfn>の祖先をたどっていくと<section>にたどり着きます。この中に定義文が入っているので、正しい使い方です。
🚫間違った使い方
<p><!-- ←最も近い祖先の段落-->
<dfn>用語</dfn>
</p>
<p>定義文</p>
👆最も近い祖先の段落には、定義文が入っていないので、間違った使い方です。
🚫間違った使い方
<p><dfn>コードキッチン</dfn>とは何でしょうか。</p>
<p>Web制作の「あれどうやって作るの？」を
料理レシピのように探せるサービスです。</p>
👆つまり、このように使ってはいけないということですね。
title属性で正式な用語名を指定する
<dfn>にtitle属性を指定すると、その値が正式な用語名であることを表します。
<p><dfn title="Web Hypertext Application Technology Working Group">WHATWG</dfn>は、HTMLとWeb関連技術の開発をするためのコミュニティです。</p>
👆このように書いた場合、正式な定義語は「WHATWG」ではなく「Web Hypertext Application Technology Working Group」となります。title属性の値は、ブラウザの画面に表示されるものではありません。ただし、検索エンジンなどのボットが読む可能性があります。
😿実際に検索エンジンが「title属性まで読んでいるかどうか」「SEO対策になるかどうか」は不明です。
abbrタグと使うことで「略語」を表す
HTMLには略語を表す<abbr>タグがあります。略語の定義をしたいときは、<dfn>と<abbr>を入れ子にして使います。
<p><dfn><abbr title="学生割引">学割</abbr></dfn>とは、学生限定の割引のことです。</p>
👆<dfn>の中に<abbr>を入れます。<abbr>のtitle属性には、完全な名称を指定します。
定義するのは、はじめに1つだけで良い
ページの中で、繰り返し登場する用語の場合、最初の1つだけ<dfn>を使って定義すればOKです。
ただし、以下のように、定義が書かれている場所へのリンクを貼ると、ユーザー体験が向上するかもしれません。
dfnにidを指定し、別の場所からリンクを貼る
<p>
<dfn id="dfn-ck">コードキッチン</dfn>は
Web制作の「あれどうやって作るの？」を
料理レシピのように探せるサービスです。</p>
〜中略〜
<!-- ↓リンクをクリックすると、定義へと飛ぶ -->
<p><a href="#dfn-ck">コードキッチン</a>は…</p>
👆<dfn>にidを指定しておき、別の用語が書かれた場所からリンクを貼ります。そのリンクをクリックすれば、用語の定義へと飛ぶことができるわけですね。