文章の中で特定の単語だけを解説できる要素「dfnタグ」をご存じですか？
今回は、dfnタグの
・dfnタグを使用することによる効果
・具体的な実用例
について説明します。具体例はサンプルコード付きで解説しますので、コピペして実際にdfnタグを使用してみてくださいね！
目次
dfnタグとは
dfnタグの読み方
dfnタグ：(読み方) デフィニションタグ
dfnタグの説明
dfnタグは「definition：定義」をあらわす単語からできていて、その名の通り定義されていることを示すタグです。一般的には注意が必要な単語や用語、別途説明が必要な単語をdfnタグで囲い、説明を後述します。
dfnタグで囲いたい単語が複数ある場合は、一番最初に登場する単語のみをdfnタグで囲います。
dfnタグで利用できる属性
dfnタグでは以下の属性を使うことができます。
| 属性 | 説明 |
|---|---|
| accesskey属性 | キーボードのショートカットの生成し、簡易なアクセスを可能にする |
| class属性 | 要素に任意の名称を与える（同じclass名を複数の要素に与えられる） |
| dir属性 | テキストの書字方向を示す ・ltr：「left to right」左から右 ・rtl：「rght to left」右から左 ・auto：自動的に書字方向を決定する |
| hidden属性 | 要素に関連性がないことを示す |
| id属性 | 要素に任意の名称を与える（同じidは使用できない：一意性） |
| lang属性 | 要素の言語を定義する |
| style属性 | 要素にCSSスタイル宣言を適用する |
| title属性 | 要素に補足情報を付ける |
dfnタグの中にtitle属性を入れる場合は、定義する用語の正式名称を指定します。title属性に指定した値が定義語となります。
abbrタグは略語を示すためのタグです。
少しわかりづらいので、実際にtitile属性を使用した例を見てみましょう。
See the Pen
definition 注意 by rabbittyu (@rabbittyu)
on CodePen.
『W3C』にマウスカーソルを乗せてみてください。W3Cの正式名称が表示されます。これはdfn要素の中で使用したtitle属性で、W3Cの正式名称を指定したからです。
このようにdfn要素の中でtitle属性を使用する場合は、定義する用語の正式名称を必ず表記しなければなりません。
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 12 |
| Firefox | 1 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 4 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
dfnタグの基本的な使い方
dfnタグの使い方
ここでは先述したようにtitle属性を記述していないため、dfnタグで囲った単語が定義語となります。dfnタグは使用することで、アルファベットが筆記体になります。
See the Pen
dfn要素 基本 by rabbittyu (@rabbittyu)
on CodePen.
dfnタグと類似する要素との違い
HTMLにはdfnタグと同じように、言葉を定義する要素があります。それがdlタグ、dtタグ、ddタグです。これらはセットで使います。
<dl>：定義リスト
<dt>：定義する言葉
<dd>：定義する言葉の説明
dfnタグとの違いは、既に定義されているかどうかです。dl、dt、ddタグはこれから定義する言葉を指定しますが、dfnタグはすでに定義され、意味が存在する言葉を指定します。
なおdl、dt、ddタグはHTML5で説明というよりは、定義という意味へ微妙にニュアンスが変更されました。
dfnタグの応用的な使い方
定義語を複数回出現させる（リンクによる利便性の向上）
文章内に定義語が初めて定義されたときにdfn要素を使用すると説明しましたが、2回目や3回目に定義語が出現した際、aタグでリンクを指定することで、より利便性の向上を図ることができます。
では実際に例を見ながら動作と使い方を確認していきましょう。dfnタグでは映画『JAWS / ジョーズ』を囲っています。
ページ下部ではおすすめをリスト形式で紹介するように設定しました。ただしジョーズのみリンクをaタグで指定しているため、クリックすることでジョーズの説明欄まで飛ぶことができます。
このようにすると、定義語が2回目、3回目と登場しても読者が効率的に意味を確認することができるのです。
See the Pen
dfn要素 リンク by rabbittyu (@rabbittyu)
on CodePen.
定義と略語を同時に使用する – dfn要素とabbr要素
では次にabbr要素とdfn要素を合わせて使う方法をご紹介します。ここではdfnタグの中でabbrタグを入れ子構造にしています。
先述した通り、title属性はabbrタグの中で使用し、title属性では略語の正式名称を指定します。
See the Pen
dfn + abbr by rabbittyu (@rabbittyu)
on CodePen.
まとめ
今回は定義語を示すdfn要素についてご説明しました。基本は以下の通りです。
・dfn要素は一番最初に登場した用語に使用する（用語が複数回登場する場合）
・dfn要素で囲うのは、基本的にはすでに定義済みの言葉
またこれに併せてリンクを指定したり、略語を示すabbrタグと一緒に使用することでさらに可読性を向上させることができます。
参考文献：
MDN web docks : 定義要素
HTMLクイックリファレンス – dl
HTMLクイックリファレンス – dfn
HTMLクイックリファレンス – abbr
<dfn> – 定義
