【HTML】dl・dt・dd要素の違いと使い方とは！？初心者にもわかりやすく解説！

自分の会社のHPコードを修正していて

というコードを見た。

リストのようにも表のようにも使われている

• dt要素
• dl要素
• dd要素

とはいったいなんだ？

「どういう意味でどういう風に使えばいいのだろう？」

と以前から思っていたので、この機会に整理してみようと思う。

dl要素・dt要素・dd要素の意味とは？

dl要素・dt要素・dd要素は何かを説明するためにセットで使われる「説明用のリスト（描写用のリスト）」だ。

単独でdl要素だけを使ったり、dd要素だけを使うことは無いので、セットで覚えてしまおう。

dl要素・dt要素・dd要素が何の略で、どんな意味なのかが分かれば少しは使い方がイメージしやすくなる。

dl要素の意味

dl要素は「description list」の略だ。

• description=描写・説明
• list＝リスト・一覧表

という意味だから、dl要素＝「説明用のリスト」という感じの意味であることがわかる。

dt要素の意味

dt要素=「description term」の略だ。

• description=描写・説明
• term=用語

という意味だから、dt要素＝「説明用の用語」という感じの意味になる。

dd要素の意味

dd要素＝「definition description」の略で

• definition=「定義」
• description=「描写・説明」

という意味だから、dd要素は「定義の説明＝説明文」という感じの意味になる。

「dd要素も最初はdescriptionだと思っていたのに、definitionかい！」

と思ったけれど(笑)、それぞれがどんな単語の略かがわかれば、使い方を間違えることは減ると思う。

使い方はどうすればいい？

それぞれの意味がわかってしまえば、使い方はある程度理解しやすい。

dl要素でdt要素とdd要素を囲む

dl要素は

「ここからここまでが説明リストです。」

とプラウザに認識してもらう役目を果たすから、dt要素・dd要素で説明している内容全体を囲むように使う。

例えば、営業時間を説明するコードを下記のように書いた場合。

こんな感じでプラウザ（Google Chromeなど）に表示される。

このようにdl要素は説明リスト全体の内容を覆うためのもので、実際にプラウザに表示されるのはdt要素やdd要素で囲われた内容となるのだ。

dt要素の内容をdd要素で詳細の説明する

dl要素はdt要素とdd要素の内容全体を囲ってプラウザに

「ここが説明リストですよ。」

と認識されるためのモノだった。

それに対して、dt要素とdd要素は説明リストの中身に当たる。

例えば、先ほどのコードの場合

dt要素は「説明用の用語」という意味で、今回の場合はそれが「営業時間」になる。

dd要素は「説明文」という意味で、今回の場合は「11:00～20:00」がそれに該当する。

つまり、

「営業時間は？(何時ですか）？」」(dt要素）

の詳細の説明として

「11:00~20:00（ですよ。）」（dd要素）

と詳細の説明をしているのだ。

Q&Aでもよく使われていて

• dt要素に「質問文」
• dd要素で「質問文に対する回答」

という形で使われる。

まとめ

dl要素・dt要素・dd要素について少しは理解が深まっただろうか？

僕は

「dl・dt・dd要素のそれぞれがどんな英単語の略でどんな意味か？」

を知ってからだいぶ整理がしやすくなったので是非今回の記事を参考にしてみて欲しい。

最後にもう一度整理すると

• dl要素：「ここからここまでが説明リストですよ！」とプラウザに認識させる
• dt要素：説明したい言葉・内容
• dd要素：説明したい用語や内容に対しての詳細な説明

という感じで使い分ければOKだ。

関連記事はこちら！

【HTML】表を作る時に活用する「tr」「th」「td」 の違いは？

【HTML】表の構造を明確化するthead/ tbody / tfoot要素 とは？わかりやすく解説！