【HTML】dfnタグで定義用語を指定する方法と使い方を解説

このページについて

このページではHTMLで使うことができるdfnの使い方などを解説しています。

dfnはコンテンツ内で定義される用語を指定します。シンプルに用語を囲むだけで無く、最も近い親要素にはその用語の説明を含める必要があります。

このタグと一緒に使うことが多いのはabbrタグ、pタグです。属性としてはtitle属性、id属性です。それぞれ詳しく見ていきながら使い方なんかを確認していきましょう。

dfnは用語を囲むだけですが、それだけだと意味もわからないままです。なのでその周辺に、もしくは関連付いたところに説明を書く必要があります。

最も基本的なのはpタグ内にdfnを書くことです。以下の例がまず簡単かつ確実な方法と言えます。

<p><dfn>中張牌</dfn>は数字牌の中でも2から8までの牌のことを指します。</p>

このように書きます。このケースの場合、dfnで囲んだ中張牌の部分が用語となります。そして最も近い親要素であるpタグに、その中張牌の説明文を記載しています。

次にtitle属性やabbrタグを使用し、略語の正式名称も添えるパターンです。2パターン一気に書きますが、それぞれ独立したものだと考えてください。

<p><dfn title="スーアンコータンキ">スッタン</dfn>はダブル役満扱いがほとんど。</p>

<p><dfn><abbr title="スーアンコータンキ">スッタン</dfn>はダブル役満扱いがほとんど。</p>

どちらも略称である「スッタン」に対する正式名称として、title属性やabbrタグを使用して「スーアンコータンキ」というワードを添えています。そして先ほどのdfnの基本的な書き方同様に、最も近い親要素であるpタグに説明を記載しています。

最後に、id属性を使用したアンカーリンクを設置する方法です。これは少々特殊と言いますか、とにかく用語の解説に重点を置いた書き方になります。

<p><dfn id="text1">老頭牌</dfn>は中張牌の逆で、数字の1と9と字牌全般をまとめて呼ぶ時の名前。</p>

<p>牌効率の基本は色々とありますが、1枚だ持っている<a href="#text1">老頭牌</a>は優先して捨てていいでしょう。</p>

こんな感じで、ドキュメント内に「老頭牌」というワードが出てくるたびにaタグでidを参照するリンクを掲載していけば、dfnを参照してその意味を繰り返し使用することができます。何度も定義しなくていいってのがポイントです。

このような感じで用語の定義と、最も近い親要素で説明を記載するというのがdfnの書き方の基礎となります。

ブラウザでは見た目の変化はこのようになります。

老頭牌は中張牌の逆で、数字の1と9と字牌全般をまとめて呼ぶ時の名前。

牌効率の基本は色々とありますが、1枚だ持っている老頭牌は優先して捨てていいでしょう。

最初のdfnで囲んだ老頭牌は斜め文字になっていて、その次にaタグでリンクを貼った老頭牌はしっかりリンクになっています。そしてクリックすれば、すぐ上の老頭牌にいくと思います。

dfnはグローバル属性・イベント属性ともにサポートしています。固有の属性はありません。

dfnは用語を囲み、その最も近い親要素で用語の解説を書くことで機能するタグです。麻雀に限らず、専門用語を多く使うようなサイトでは適切な設定をしてあげることで読者に優しいサイトになるんではないでしょうか。