dl 要素の勉強をするタイミングは、ul 要素や ol 要素のあとに流れでやる人は多いのではないでしょうか。内容的にもすこし似ていますが、よりセマンティックで複雑、少しだけ苦手意識があるかもしれません。
でも実はそんなに難しくはないです！
さらっとやっちゃいましょう！
- dl 要素、dt 要素、dd 要素の基本的な使い方
- dl 要素にかかわる用語
- 複数の dt 要素、dd 要素の組み合わせの考え方
目次
基本的な使い方
先に、基本的な使い方を見てみましょう！
dl 要素は dt 要素と dd 要素とセットで使います。
dt 要素には用語なんかを入れて、
dd 要素にはその説明になるものを入れます。
“用語”や“説明”はテキストでなく画像なども許容されています。それをワンセットでリストとして任意の数を記述して、あとはまるっと dl 要素で囲うってスンポウです！文章だとイマイチ理解しづらいかもしれないので、下記のコード例をご覧ください。
<dl>
<dt>用語</dt>
<dd>上の用語の説明</dd>
<dt>用語２</dt>
<dd>上の用語２の説明</dd>
<dt>用語３</dt>
<dd>上の用語３の説明</dd>
</dl>だいたいこんな感じ！
ちなみに dt 要素とdd 要素はそれぞれ複数そして連続して入れることも可能です。それは後ほど説明しますので、次は用語を見てみましょう。
dl 要素を使ったリストは
Description List と
呼ばれる
この dl 要素と dt 要素と dd 要素でできたリストをのことを「Description List」と呼びます。日本では最近「説明リスト」などと呼ばれていることもあります。本記事では曖昧さを回避するために英語のまま進めちゃいます！
情報が錯綜している
よく dl は「定義リスト」や「definition list」の略と見かけることが多いです。私もはじめはそのように覚えました。
W3C では「Description List」というワードで説明されています。
ですので現在はそれが正しい情報なのかなぁと思います。ただし翻訳については、解釈の違いがあるので自分のわかりやすいもので覚えるのが良いかと思います！
なぜこのように情報が錯綜しているのかというのは、HTML4 から HTML5 に移行したことで dl 要素のセマンティック的な意味に変更があったからという説を他のブログさんで見かけました。が、正直、何が正しいかは不明です。
それでは、
「Description List」を構成している要素のそれぞれの単語の意味を調べて、理解を深めていきましょう！
dl 要素は
description list
の略
dl 要素は、前述でお分かりの通りそのまま description list の略だと思われます。
description の読みは『ディスクリプション』。意味は「解説、説明」。「定義リスト」と呼ぶ人もいますが、これは dl を definition list と解釈しているためだと思われます。
単語
description：解説、説明（weblio）
dt 要素は
description term
の略
dt 要素は、description term の略だと思われます。
description の意味は前述の通り「解説、説明」、
term の読みは『ターム』。意味は「期間、任期」、「用語、専門語」、「言い方、表現」です。Description List においては「用語」あたりがしっくりくるのではないかと思います。
単語
term：用語、専門語（weblio）
dd 要素の意味は
description details
の略？
申し訳ございません。。
こちらは正しそうな答えを見つけられませんでした。
“description details”の略と見出しで書きましたが、ソースは mdn の dt 要素の解説のページ内です。また『description, definition, or value』の略という可能性もありそうです。これは W3C の dd 要素の解説部分で見つけた文章の中にありました。後者の方が公式ですが、単語としてしっくりこないので、覚えるなら“description detiails”の方を個人的には推したいです！
ちなみに detail の読みは『ディテール』、意味は「細部、ディテール」。日本語的にはムズイ単語ですね。。。私は“ディテール”として雰囲気で読み取ることにしました笑。
セマンティックの観点から
Description List を見てみる
さて、
dt 要素が「用語」などを表し、dd 要素が「説明」を意味するところは前項でお分かりいただけるかと思います。それらを dl 要素で囲って「Description List」、というのが基本的な使い方、そして考え方です。
基本的な記述方法は下記のようにします。
<dl>
<dt>用語</dt>
<dd>上の用語の説明</dd>
</dl>セマンティック的な解釈として、dt 要素の下（兄弟要素の位置）に dd 要素を記述し、隣接する dt 要素と dd 要素は互いに「用語」と「説明」の関係としてワンセットで扱います。また dt 要素と dd 要素の順番はこの通りである必要があります。逆だとまた意味が変わってきます。
当然“リスト”なのでこの dt~dd のセットを積み重ねて使います。これらはワンセットを“リストアイテム”みたいなイメージで捉えると理解しやすいかと思います！
コードで見てみると同じ兄弟要素なのに、なんだか違和感がありますね！でも使っているうちに慣れてくると思います。（なんだか「見出し（h1~h6）」の扱いに似ているような気がします！）
また、
dt 要素を複数続けたり、dd 要素を複数続けたりするということもできます。この場合は、複数の「用語」に対しての「説明」、または「用語」に対する複数の「説明」、さらには複数の「用語」に対しての複数の「説明」というのがセマンティック的な解釈になります。
ややこしいですね！
複数の用途や説明のコード例は下のような感じです。
<dl>
<dt>今川焼き</dt>
<dt>おやき</dt>
<dt>大判焼き</dt>
<dd>小麦粉、卵、砂糖を水で溶いた生地を鉄や銅製の円形に窪んだ焼き型へ流し込み、餡を包埋し、高さの低い円筒形ないしは分厚い円盤状に焼成したものである</dd>
<dd>この和菓子の名称は全国的には統一されておらず、地域や各店舗によってさまざまに呼称されている。</dd>
</dl>（今川焼きの説明の引用元：Wikipedia）
身近なところだと、翻訳やフリガナとかでも活用できそうですね！でもなかなかそんなに使わないような気がするので、頭の片隅にそっと置いておけばよいかと思います。
Description List の
コンテンツモデル
「Description List」のコンテンツモデルについて説明します。コンテンツモデルって何？という人は下の参考リンクをご参照いただけますと幸いです。
Description List を内包することができる要素
「Description List」を内包することができる要素は、コンテンツモデルにおいて「Flow content」を内包することができる要素です。
dl 要素は、コンテンツモデルのカテゴリーでは「Flow content」に属しています。つまり多くの要素が「Flow content」を内包することできます。「Description List」は、けっこう幅広い場所で使うことができそうですね。特に難しく考えなくても大丈夫かと思います！
dl 要素が内包できる要素
dl 要素が内包できるのは、１つ以上の dt 要素と１つ以上のdd 要素のセットです。それぞれが単品になってしまうのはNGです！必ずセットにしなければなりません。また、dl 要素内は空っぽでもコード的に問題ありません。
必要に応じて、div 要素やスクリプトサポート要素（script 要素、template要素）も内包することが可能です。（こちらはワンランク上の知識なので、本記事で詳しくまとめるのは割愛いたします。）
dt 要素が内包できる要素
dt 要素が内包できるのは「Flow content」に属する要素です。ただし、「header 要素」と「footer 要素」、「Heading content（h1~6 要素など）」、「Sectioning content（section 要素など）」が子孫にある要素は含めることができません。
dd 要素が内包できる要素
dd 要素が内包できるのは「Flow content」に属する要素です。こちらは特に制限はないようです。
メモ
dt 要素と dd 要素は div 要素を親要素にすることを許容されています。（dt 要素と dd 要素を div 要素で囲うことが可能です。）
<dl>
<div>
<dt>用語</dt>
<dd>上の用語の説明</dd>
</div>
<div>
<dt>用語２</dt>
<dd>上の用語２の説明</dd>
</div>
<div>
<dt>用語３</dt>
<dd>上の用語３の説明</dd>
</div>
</dl>上記のように div 要素でグループ化する使い方が可能です。これによりスタイリングやスクリプトによる操作の幅が広がります。
まとめ
dl 要素に dt 要素と dd 要素のセットをリストとして内包したグループを「Description List」と呼びます。セマンティック的に、隣接する dt 要素と dd 要素は互いに「用語」と「説明」の関係で扱います。また dt 要素と dd 要素は複数続けで入れることも可能です。
コンテンツモデルとしては、dl 要素には何も入れないか、dt 要素と dd 要素をセットで１つ以上入れることができます。dt 要素には「header 要素」と「footer 要素」、「Heading content」、「Sectioning content」が子孫にある要素は含めることができないという制限があります。
ul 要素などと比べて複雑ですが、実際に使ってみるとそんなに難しくないので、使える場面があれば積極的に使っていきましょう！
参考・出典
・W3C. 「4.4.9 The dl element」. https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element, 2024年7月17日閲覧。
・weblio. 「descriptionとは 意味・読み方・使い方」. https://ejje.weblio.jp/content/description, 2024年7月17日閲覧。
・weblio. 「termとは 意味・読み方・使い方」. https://ejje.weblio.jp/content/term, 2024年7月17日閲覧。
・weblio. 「termとは 意味・読み方・使い方」. https://ejje.weblio.jp/content/term, 2024年7月17日閲覧。
・weblio. 「definitionとは 意味・読み方・使い方」. https://ejje.weblio.jp/content/definition, 2024年7月17日閲覧。
・weblio. 「detailとは 意味・読み方・使い方」. https://ejje.weblio.jp/content/detail, 2024年7月17日閲覧。
