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

<dfn>タグは、コンテンツ内で定義（defining）している用語であることを示します。

このタグは、定義に関する用語であることを明確にするためのものであり、用語と定義がセットで提示されている文においてのみ使用されます。

基本の例

HTML 
<p>
    <dfn>HTML</dfn>は、
    HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、
    ウェブページを構造化し、内容を表示するために使用される言語です。
</p>
ブラウザーで実際に表示される様子

この例では、<dfn>タグは “HTML” という用語が文中で定義されていることを示しています。
このタグは定義とともに登場する用語を明確に表示するための意味論的なタグであり、視覚的な強調ではなく、情報構造と意味論的解釈の正確さを高める目的で使用されます。

注意点

<dfn>タグの最も近い上位の親要素は、該当用語の定義を含んでいる必要があります。例えば、段落（<p>）、説明リスト（<dl>、<dt>、<dd>）、一般的なセクション（<section>）などで、用語と定義が一緒に提示されている必要があります。

段落内での<dfn>タグの使用

<dfn>タグは定義している用語であることを示す役割があるため、該当用語の定義を含む文や段落などが<dfn>タグの親要素である必要があります。

例えば、次のようなHTMLコードを考えてみます。

HTML 
<p>
    <dfn>HTML</dfn>はHyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、ウェブページを構造化し、内容を表示するために使用される言語です。
</p>

上記の例では、<dfn>タグは「HTML」という用語を強調しており、その用語の定義が親要素である<p>タグの内部に含まれています。これにより、ウェブページの利用者は該当用語が何を意味するのかを素早く理解し、関連情報を参照しやすくなります。

説明リスト内での<dfn>タグの使用

<dfn>タグは説明リスト（<dl>）内でも用語とその定義を構造化するために使用できます。<dt>タグ内で定義する用語を<dfn>で囲み、<dd>タグにその用語の定義を記述することで、情報を明確に表現できます。

HTML 
<p>HTMLとCSSの説明です。</p>
<dl>
    <dt><dfn>HTML</dfn></dt>
    <dd>
        HyperText Markup Languageの略で、
        ウェブページを作成するために使用される
        マークアップ言語です。
    </dd>
    <dt><dfn>CSS</dfn></dt>
    <dd>
        Cascading Style Sheetsの略で、
        ウェブページのスタイルとレイアウトを指定するために使用される
        スタイルシート言語です。
    </dd>
</dl>

上記の例では、<dfn>タグはそれぞれ「HTML」と「CSS」という用語が定義されていることを示しています。これらの用語は<dt>タグ内で<dfn>で囲まれており、定義はそれぞれの<dd>タグ内に位置しています。このように説明リスト内で<dfn>を使用すると、用語とその定義の関係を構造化でき、文書の意味論的な明確さを高めるのに役立ちます。

一般的なセクション（<section>）などでの<dfn>タグの使用

<dfn>タグは一般的なコンテンツセクションである<section>タグ内でも使用できます。この場合、セクション全体が該当用語の定義の文脈を形成し、<dfn>タグはその中で定義される用語を明確に示すために使用されます。

HTML 
<section>
    <h2>ARIA</h2>
    <p>
        <dfn>ARIA</dfn>はAccessible Rich Internet Applicationsの略で、
        ウェブコンテンツを支援技術と共に利用できるように支援するアクセシビリティ技術です。
    </p>
</section>

この例では、<section>タグが「ARIA」という用語を中心テーマとしており、その用語はセクションのタイトルと本文で共に使用されています。<dfn>タグは「ARIA」という用語が定義されていることを明確に示し、定義内容は同じセクション内に含まれているため、意味論的に正しい使い方です。

title属性の使用

<dfn>タグにtitle属性が使用されると、その属性が正確な用語の定義対象となります。

HTML 
<p>
    The <dfn title="Hypertext Markup Language">HTML</dfn> is a standard
    markup language used to create web pages.
</p>

コード補足説明
title属性は、この属性が付与された要素に関する指示や説明などの参考情報を示します。いくつかのデスクトップブラウザではツールチップ（tooltip）として表示されます。

この場合、<dfn>タグのtitle属性値である「Hypertext Markup Language」が用語「HTML」の定義を示します。

注意してください！
<dfn>タグの親要素や先祖要素にあるtitle属性は<dfn>タグには影響しません。
つまり、<dfn>タグに直接title属性を定義した場合にのみ、その<dfn>タグの定義を示すことになります。

<abbr>タグの使用

<dfn>タグ内に<abbr>タグを使用し、この<abbr>タグにtitle属性が使用されると、その属性が正確な用語の定義対象となります。

HTML 
<p>
    The <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> is used
    for styling web documents.
</p>

コード補足説明
<abbr>タグは略語や短縮語を示すタグです。主にtitle属性で略語や短縮語の説明や正式形を、人が読める形で値として持ちます。

この場合、<dfn>タグ内にある<abbr>タグのtitle属性値「Cascading Style Sheets」が用語「CSS」の定義を示します。

これらの例は、<dfn>タグの使用方法と内部の内容によって用語の定義がどのように決定されるかを示しています。<dfn>タグはこのように用語を明確に定義して文脈を改善し、利用者が文書の内容を理解するのに役立ちます。

ブラウザ互換性

dfnタグのブラウザ互換性
タグ
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
<dfn> 15 12 1 6

仕様書

dfnタグの仕様書
仕様書
<dfn> HTML Standard
#the-dfn-element

参考資料

関連項目