先日初心者の模写コーディングにオススメというUdemyの
実践Webサイトコーディング講座 ｜ HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみようを行っていたらdl、dt、ddタグがたくさんでてきますが、ここで初めて使用しました。
そこでそもそもdl、dt、ddタグって何？という疑問を解決していきます。
dl、dt、ddタグとは？
dl、dt、ddタグの意味は以下です。
| dl（description list） | 説明リスト |
|---|---|
| dt（description term） | 説明するテーマ |
| dd (definition / description) |
説明文 |
要するに「dtの内容をddで説明するという形式」のリストになります。
HTML4までは「description」の部分が「definition」といことで説明リストではなく、「dlの内容をddで定義する形式」というリストでしたが、HTML5からは上記の通り「dtの内容をddで説明するという形式」という風に緩和されたので使える場面が増えました。
もちろんHTML5でもHTML4と同じように「dlの内容をddで定義する形式」という意味で使用することも可能です。
dl、dt、dtの記述方法
dl、dt、ddの記述例をCodepenで記述してみました。
See the Pen
【HTML/CSS】dl by Jyu2 (@Jyu2)
on CodePen.
- 1つのdtに対して1つのdd
- 1つのdtに対して複数のdd
- 複数のdtに対して1つのdd
- 複数のdtに対して複数のdd
ということでdt、ddが1セットにさえなっていれば何でもOKです。
また、dlの中のdtとddのセットに数の制限はありません。
dfnタグ
先にHTML5ではdl、dt、ddは「説明リスト」で、HTML4のときの「定義リスト」ととしても使用可能と書きました。
しかし、そのまま記述するだけでは「説明リスト」か「定義リスト」かの区別がつきません。
そこで登場するのがdfnタグになります。
dtタグの内容をdfnタグで囲むことによって「定義リスト」であることを表現します。
ulとの使い分け
ulタグは単純なリストの時に使用します。
それに対してリスト(項目)に対して説明が必要な場合はdlを使用します。
見出し1つに対して説明があるようなテーブルの変わりにもdlは使用することができます。
| 説明項目1 | 説明項目1に対しての説明 |
|---|---|
| 説明項目2 | 説明項目2に対しての説明 |
こんな感じのやつですね。
ちなみにこのようなテーブルっぽくする場合はfloatを使用して横並びにする必要があります。
See the Pen
【HTML/CSS】dlをテーブルっぽく by Jyu2 (@Jyu2)
on CodePen.
それ以上のものになるとtableを使用する必要がありますね。
まとめ
僕はdl、dt、ddを使用するような場面でもh3やらh4とpを組み合わせて使ってしまい、HTMLやCSSが煩雑になってしまっていました。
おさらいです。
- dl、dt、ddは「説明型のリスト」
- dfnタグを使用すればHTML4までの「定義方リスト」としても使用できる
- dtとddは1セットになっておけば良く、1:1ではない
今後は意識してdl、dt、ddを使用することでそういった問題も解消されるので今後はきちんとdl、dt、ddを使用していきます。
