dfnタグ 👉 定義する用語を表す

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を指定しておき、別の用語が書かれた場所からリンクを貼ります。そのリンクをクリックすれば、用語の定義へと飛ぶことができるわけですね。