【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要素で説明している内容全体を囲むように使う。

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

プラウザ表示
営業時間
11:00~20:00

こんな感じでプラウザ(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要素 とは?わかりやすく解説!

おすすめの記事