HTML <dfn>タグ：正しい理解と使い方

<dfn>タグは、コンテンツ内で定義（defining）している用語であることを示します。
このタグは、定義に関する用語であることを明確にするためのものであり、用語と定義がセットで提示されている文においてのみ使用されます。

基本例

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

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

注意点

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

<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>

title属性の使用

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

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

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

参考資料

codingEverybody：HTML <dfn>タグ：正しい理解と使い方