HTMLにおける下記3つの要素が混乱しやすいので、備忘録も兼ねて整理しておこうと思う。
- dt要素
- dl要素
- dd要素
Contents
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要素で説明している内容全体を囲むように使う。
例えば、営業時間を説明するコードを下記のように書いた場合。
1 2 3 4 | <dl> <dt>営業時間</dt> <dd>11:00～20:00</dd> </dl> |
- 営業時間
- 11:00～20:00
こんな感じでプラウザ（Google Chromeなど）に表示される。
このようにdl要素は説明リスト全体の内容を覆うためのもので、実際にプラウザに表示されるのはdt要素やdd要素で囲われた内容となるのだ。
dt要素の内容をdd要素で詳細の説明する
dl要素はdt要素とdd要素の内容全体を囲ってプラウザに
「ここが説明リストですよ。」
と認識されるためのモノだった。
それに対して、dt要素とdd要素は説明リストの中身に当たる。
例えば、先ほどのコードの場合
1 2 3 4 | <dl> <dt>営業時間</dt> <dd>11:00～20:00</dd> </dl> |
dt要素は「説明用の用語」という意味で、今回の場合はそれが「営業時間」になる。
dd要素は「説明文」という意味で、今回の場合は「11:00～20:00」がそれに該当する。
つまり、
「営業時間は？(何時ですか）？」」(dt要素）
の詳細の説明として
「11:00~20:00（ですよ。）」（dd要素）
と詳細の説明をしているのだ。
Q&Aでもよく使われていて
1 2 3 4 | <dl> <dt>閉店時間は何時ですか？</dt> <dd>20時までとなります。</dd> </dl> |
- dt要素に「質問文」
- dd要素で「質問文に対する回答」
という形で使われる。
まとめ
dl要素・dt要素・dd要素について少しは理解が深まっただろうか？
私は下記を知ってからだいぶ整理がしやすくなったので、是非今回の記事を参考にしてみて欲しい。
「dl・dt・dd要素のそれぞれがどんな英単語の略でどんな意味か？」
最後にもう一度整理すると
- dl要素：「ここからここまでが説明リストですよ！」とプラウザに認識させる
- dt要素：説明したい言葉・内容
- dd要素：説明したい用語や内容に対しての詳細な説明
という感じで使い分ければOKだ。
関連記事はこちら！
