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

HTMLにおける下記3つの要素が混乱しやすいので、備忘録も兼ねて整理しておこうと思う。

• 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要素 とは？わかりやすく解説！