備忘録の使い方はこちら

dl/dt/ddの使い方

HTML
この記事は約2分で読めます。

意味

HTML4までは定義リストとしての意味で使うものだったが、HTML5より説明リストタグとしての意味を持つようになり用途の幅が広がってるらしい。

定義リストとは

定義リストとは定義に対しての説明なので簡単に言えば辞書のような書き方

ぞう:鼻が長いのが特徴の動物。
きりん:首が長いのが特徴の動物

dl 定義リスト
dt 定義する言葉
dd 定義の説明

説明リストってなんじゃ?

dtの内容をddで説明できてるような書き方ならOKなので、辞書のような書き方じゃなくてもいいらしい。

dl 説明リスト
dt 説明する言葉
dd 定義文or説明文

例えば
明日の天気:午前中は晴れ、夕方から曇り

とか

バスの座席は何列ですか?
 4列シートのバスです。
乗務員は何名ですか?
 2名です
といったQ&Aでも使える。

実はこんな書き方もできるらしい

一つのdtに対して複数のdd

<dl>
<dt>ぞう</dt>
<dd>鼻が長い</dd>
<dd>耳も大きい</dd>
</dl>

複数のdtに対して一つのdd

<dl>
<dt>google</dt>
<dt>amazon</dt>
<dt>facebook</dt>
<dt>apple></dt>
<dd>米国のグーグル、アマゾン、フェイスブック、アップルの4社のことをいう。いずれも、ITを使った各種サービスの共通基盤になるインフラを提供する巨大事業者</dd>
</dl>

dfnタグについて

dl/dt/ddには「定義リスト」と「説明リスト」の2つの役割があるが、googleのロボットからすれば、どちら「定義リスト」なのか「説明リスト」なのかの判断がつかない。
よって定義リストであることをロボットに分からせたい場合は「dfn」タグを使う。

<dl>
<dt><dfn>ぞう</dfn></dt>
<dd>鼻が長い</dd>
</dl>