dfnタグ -用語の定義を示す｜HTML辞典
<dfn>タグとは？
<dfn> タグは、用語の定義を示すためのタグです。
SEO やアクセシビリティの向上に役立ち、検索エンジンやスクリーンリーダーが定義語を正しく認識しやすくなります。
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）。
閉じタグの有無
<dfn> は 開始タグ（<dfn>）と閉じタグ（</dfn>）の両方が必要 です。
基本的な記述方法
<p><dfn>SEO</dfn> とは、検索エンジン最適化のことを指します。</p>
使用できる主な属性
<dfn> タグには特別な属性はありませんが、title 属性を組み合わせることで意味を補足することができます。
| 属性名 | 説明 | 例 |
|---|---|---|
title | 定義の補足説明（任意） | <dfn title="Search Engine Optimization">SEO</dfn> |
CSSを使ったデザイン変更
<dfn> は通常 斜体 で表示されますが、スタイルをカスタマイズできます。
dfn {
font-style: normal;
font-weight: bold;
color: blue;
}
適切な使用例
✅ 用語を明確に定義する
<p><dfn>HTML</dfn> とは、Webページを構成するためのマークアップ言語です。</p>
✅ title 属性を使って補足情報を追加する
<p><dfn title="Cascading Style Sheets">CSS</dfn> は、Webページのデザインを指定する言語です。</p>
✅ <abbr> と組み合わせて、略語の説明を補足する
<p><abbr title="HyperText Markup Language"><dfn>HTML</dfn></abbr> は、Webの基本言語です。</p>
適切でない使用例（誤った使い方）
❌ <dfn> を単なる装飾目的で使う
<!-- NG: スタイリング目的で <dfn> を使用 -->
<p><dfn style="color: red;">注意！</dfn> 重要なメッセージです。</p>
✅ 正しい書き方（用語の定義に使用）
<p><dfn>JavaScript</dfn> とは、Webページに動的な機能を追加するプログラミング言語です。</p>
❌ <dfn> の中に長い文章を含める
<!-- NG: 長い説明を <dfn> に含める -->
<p><dfn>SEO（Search Engine Optimization）は、検索エンジンでの順位を向上させる技術</dfn> のことです。</p>
✅ 正しい書き方（定義語のみを <dfn> でマークアップ）
<p><dfn>SEO</dfn>（Search Engine Optimization）は、検索エンジンでの順位を向上させる技術のことです。</p>
<dfn>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<dfn> | 用語の定義を示す | SEO・アクセシビリティ向上 | 専門用語、略語の説明 |
<abbr> | 略語を定義 | title 属性で補足可能 | 略語や頭字語の説明 |
<em> | 文章の強調 | 斜体表示（<dfn> とは異なる） | 重要な強調 |
使用上の注意点
✅ <dfn> で定義するのは「単語や短いフレーズ」にする
- 長い文章は
<dfn>ではなく、説明文として記述する。
✅ <dfn> だけでなく、前後の文脈で意味が明確になるように記述する
<dfn>CSS</dfn>だけではなく、「CSS はスタイルを指定する言語です」と補足する。
✅ title 属性を活用して、より詳細な意味を付加する
<dfn title="HyperText Markup Language">HTML</dfn>のように補足情報を追加できる。
関連タグ
まとめ
<dfn> タグは、HTML文書内で 専門用語の定義を示すためのタグ です。
検索エンジンやスクリーンリーダーに意味を正しく伝えるために活用し、SEO やアクセシビリティ向上に役立ちます。
