定義<dfn>タグと略語<abbr>の使い方

2023年3月30日

用語を定義して説明する際は<dfn>タグを使用します。この「dfn」は、「定義上の」を意味する「definitional」の略語になります。

同じような定義のタグには、説明リスト<dl>内で使用する<dt>タグもありますが、この<dt>タグはブロックレベル要素であるのに対し、<dfn>タグはインライン要素である点に違いがあります。

<dfn>タグはインライン要素のため、前後では改行がされず、段落<p>タグ内などにて、文章中の用語に単発で使用するHTMLタグになります。

用語を定義する<dfn>タグの使い方

この<dfn>タグの使い方は、<p>タグなどの文章中で使用している用語を<dfn></dfn>で囲うだけです。

<p><dfn>PPC</dfn>は、クリックされるごとに費用が発生する広告配信のことを指します。</p>コピー

このように使用することで、「PPC」が定義する用語となります。

ただし、<dfn>タグにtitle属性がある場合は、そちらが定義される用語となります。

例えば、以下の場合は、略語を表す<abbr>タグにもtitle属性がありますが、<dfn>タグのtitle属性の「クリック課金型広告」の方が定義される用語になります。

<p><dfn title="クリック課金型広告"><abbr title="Pay Per Click">PPC</abbr></dfn>は、クリックされるごとに費用が発生する広告配信のことを指します。</p>コピー

この<dfn>タグで定義する用語に対して、最も近い祖先の要素である<p>タグや<section>などには、定義する説明文を含む必要があります。

また、<dfn>タグにID属性を埋め込むことによって、他のページからも参照しやすくなります。

<p><dfn id="ppc">PPC</dfn>は、クリックされるごとに費用が発生する広告配信のことを指します。</p>コピー

このようにすることで、他から参照する際、<a href="https://www.example.com/sample.html#ppc">PPC</a>のような形で、定義した用語を参照することができます。

■<dt>タグとの違い

一方、用語集などで使用する<dt>タグは、定義する用語について以下のように使用します。

<dl>
<dt>W3C</dt>
<dd>W3Cは、ウェブの標準化を推進する国際的な非営利団体です。</dd>
<dt>WHATWG</dt>
<dd>WHATWGは、ブラウザベンダーのエンジニアによって設立されたコミュニティです。</dd>
<dt>IETF</dt>
<dd>IETFは、インターネット技術の標準化を進める国際的な団体です。</dd>
</dl>コピー

この<dl>タグを使用する場合、<dt>タグ内の定義したい用語の箇所で<dfn>タグも同時に使用することができます。

例えば、以下のような場合、<dt>タグ内には（米国）などの文字列も含まれるため、定義する用語を明確にするために<dfn>タグも併用することをおすすめします。

<dl>
<dt><dfn>W3C</dfn>（米国）</dt>
<dd>W3Cは、ウェブの標準化を推進する国際的な非営利団体です。</dd>
<dt><dfn>WHATWG</dfn>（2004年）</dt>
<dd>WHATWGは、ブラウザベンダーのエンジニアによって設立されたコミュニティです。</dd>
<dt><dfn>IETF</dfn>（アイイーティーエフ）</dt>
<dd>IETFは、インターネット技術の標準化を進める国際的な団体です。</dd>
</dl>コピー

この<dl>タグは、以前まではdefinition lists（定義リスト）の意味で使用されていましたが、最近ではdescription list（説明リスト）の意味で使用されており、定義だけではなく、何らかの説明をする際の幅広い用途で使用されています。

そのため、<dt>タグを使用する際には、定義タグの<dfn>も併用した方が、よりセマンティックな形で定義の意図を明確に示すことができます。

略語の正式名称を示す<abbr>タグの使い方

上記の<dfn>タグと合わせてよく使用されるタグには、その用語が略語であることを示す<abbr>タグがあります。

この<abbr></abbr>は、その正式名称をtitleタグで展開する形で使用します。

<p><abbr title="World Wide Web Consortium">W3C</abbr>は、ウェブの標準化を推進する国際的な非営利団体です。</p>コピー

ただし、文章中で使用する略語の全てに<abbr>タグを使用する必要はなく、特に強調したい際やなじみのない用語の場合に使用します。

また、上記の<dfn>タグと併用すると以下のようになります。

<p><dfn><abbr title="World Wide Web Consortium">W3C</abbr></dfn>は、ウェブの標準化を推進する国際的な非営利団体です。</p>コピー

<dt>タグ内で使用する際にも同様となります。

上記のように記載した場合、サイト上では「W3C」の箇所にマウスをポイントした際に、title属性の「World Wide Web Consortium」が表示されるようになります。

ただし、必ずしも定義の<dfn>タグと併用する必要はなく、文脈中で特に説明する文章がない場合には<abbr>のみを単発で使用することをおすすめします。

例えば、以下のような場合、<p>タグ内の文章が「CPI（消費者物価指数）」の用語の説明や定義にはなっていないため、定義タグの<dfn>を併用する必要はありません。

<p>今月の<abbr title="Consumer Price Index">CPI</abbr>は原油高による物価高騰の影響を受け、10%上昇しました。</p>コピー

上記のように、定義関連のHTMLタグには<dt>や<dfn>、<abbr>などがありますが、状況によってそれぞれを使い分けるとよいでしょう。