MENU
HTMLタグのdlタグ、dtタグ、ddタグを使ってWebサイトに“説明リスト（定義リスト）”を作ることができます。
HTMLでリストというとulタグやolタグが思い浮かぶと思いますが、dlタグを用いる説明リストはul、olタグで作るリストとは使い方、記述方法などが異なります。ul、olタグを使うリスト（いわゆる箇条書き）の使い方は以下の記事をご覧ください。
dl、dt、ddで作る説明リストとは？
そもそも“説明リスト”と言われてもピンと来ませんよね。
説明リストというのは“○○という名前のものに対しての説明△×□”という形をしているリストと考えてください。つまり名前と説明（内容）がセットになっているリストが説明リストです。
説明リストの主な用途
名前と説明がセットのリストなので使いどころが限定されそうですが、意外と色々な場面で活躍します。主な使用場所として以下のようなものが挙げられます。
- 用語解説（“用語名”とその“説明”など）
- 人物紹介（“人物名”とその“説明”など）
- FAQ（“質問と回答”がセットになっているもの）
- 新着情報の一覧表示
実際のWebサイトのソースコードを見るとサイト内の色々な所で使われていますよ。
HTML4でのdl、dt、dd
dl、dt、ddはHTML5になって意味が変わったHTMLタグで、HTML4の時にはdlタグは“定義リスト”という意味でした。説明リストよりもキッチリとした堅い印象ですよね。
意味を広く捉えれば定義リストも説明リストの中の一種という感じなので、名称を定義する場合などでも今まで通り使えます。
つまり、HTML5でのdlタグは意味の解釈がより幅広くなりましたが、【名称＋説明】というdl、dt、ddの使い方は変わらずに色々な場面で使い易くなったと考えてください。
dl、dt、ddの意味・役割を知ろう
説明リストの使い方の前に、まずはdl、dt、ddタグそれぞれのHTMLタグの意味や役割を知りましょう。
dlタグとは？
dlタグは「description list」（訳：説明 リスト）の略で、説明リスト全体を囲むためのタグです。つまり「ここ（dlタグで囲まれた範囲）は説明リストですよ！」と定義しているわけですね。
また、先程も言った通り、HTML4では「definition list」（訳：定義 リスト）という意味を持っていました。英語名ではどちらの頭文字もdlですね（笑）
注意点として、dlタグの中にはこの後説明するdtタグとddタグのみを入れることができます。それ以外のタグはdlタグの直下では使えないことを覚えておきましょう。
HTML5.2では、dlタグの中で使えるHTMLタグは従来のdt、ddタグに加えてdivタグも使えるようになりました。
なので、現在dlタグの中では3種類のHTMLタグが使えるということです。
dtタグとは？
dtタグは「description term」(訳：説明の 用語)の略で、説明リストの説明する用語（名称やタイトルなど）を」囲むタグです。
dtタグの中はインライン要素のみが入れられます。divタグやpタグ、h2タグのようなブロックレベル要素は入れられないので注意が必要ですね。
HTML5で「定義リスト」として扱う場合はdtタグの中のテキストをdfnタグで囲みます。dtタグの中でdfnタグを使うことで、その用語が定義リストの用語であると明確に示せます。
dtタグだけでは成立しないという点に注意が必要です。ひとつのdtタグには必ずひとつ以上のddタグが必要になります。
ddタグとは？
ddタグは「description description」（訳：説明の 説明）の略です。かね？要は説明リストの説明の部分です。
ddタグはdtタグでの内容（用語や名称など）に対する説明本文を記述します。
dtタグとは異なりddタグの中にはブロックレベル要素のタグも入れることができます。なので、ddタグの中でさらに別のリスト項目を作ったり、tableタグを使って表を作ったりもできます。
dl、dt、ddの記述方法と使い方
dl、dt、ddタグの基本の記述は以下のようにdlタグの中にdtタグとddタグが入ります。以下の例では“HTML”についての説明を例としています。
<dl>
<dt>HTML</dt>
<dd>HTMLとはWebサイトを構築するのに使用するマークアップ言語の名称、及びそれを記述されたファイルの拡張子のこと。「Hyper Text Markup Language（ハイパーテキスト マークアップ言語）」の頭文字を取ってHTMLと呼ばれている。</dd>
</dl>このHTMLコードは、実際のブラウザ上では以下のように表示されます。WebのいろはのCSSが反映されているので見た目はオリジナルのものですが、基本的には名称とその説明が並んで表示されます。
- HTML
- HTMLとはWebサイトを構築するのに使用するマークアップ言語の名称、及びそれを記述されたファイルの拡張子のこと。「Hyper Text Markup Language（ハイパーテキスト マークアップ言語）」の頭文字を取ってHTMLと呼ばれている。
dt、ddはdl内で複数の使用が可能
dt、ddタグは、ひとつのdlタグ内に複数回使用することが出来ます。以下の2つのことを覚えておきましょう。
- dlタグ内に複数のdt、ddタグのペアが入れられる
- ひとつのdtタグに対して複数のddタグを指定できる
このようにdt、ddタグは1つずつしか使えないわけではないので、使う場面に合わせて感じに対応できますね。
例えば、私の好きな食べ物である“ラーメン”と“うどん”で説明リストを作ってみました。
<dl>
<dt>ラーメン</dt>
<dd>やっぱり最初はスタンダードな醤油ラーメン。鶏がらスープが食欲をそそります。</dd>
<dd>味噌ラーメンも捨てがたい。コーンとワカメのトッピングします！濃厚な味噌ならではの香りが食欲をそそります。</dd>
<dd>あっさり塩ラーメンも外せない。あまり食欲が無くてもスープの香りがだんだん食欲をそそります。</dd>
<dd>いつもそばにいる「ブタメン」。ストックが切れないように買い置きしなきゃ！豚骨もいいけど、私は醤油派！カップ麺ならではの香りが食欲を…(ry</dd>
<dt>うどん</dt>
<dd>私の基本はざるうどん。暑い夏は勿論のこと年中無休で食せます。</dd>
<dd>時間がない時のかけうどんにはいつも助けられています。スープを飲み干すまでがすべて。</dd>
</dl>このように、ひとつのdtタグに複数のddタグを付けられ、ひとつのdlタグに複数のdt、ddタグのセットを記述できます。ブラウザ上の表示は以下のようになります。
- ラーメン
- やっぱり最初はスタンダードな醤油ラーメン。鶏がらスープが食欲をそそります。
- 味噌ラーメンも捨てがたい。コーンとワカメのトッピングします！濃厚な味噌ならではの香りが食欲をそそります。
- あっさり塩ラーメンも外せない。あまり食欲が無くてもスープの香りがだんだん食欲をそそります。
- いつもそばにいる「ブタメン」。ストックが切れないように買い置きしなきゃ！豚骨もいいけど、私は醤油派！カップ麺ならではの香りが食欲を…(ry
- うどん
- 私の基本はざるうどん。暑い夏は勿論のこと年中無休で食せます。
- 時間がない時のかけうどんにはいつも助けられています。スープを飲み干すまでがすべて。
dlタグ内でdivタグを使う場合
dlタグの説明でも訂正しましたが、2017年12月に勧告されたHTML5.2ではdlタグの中でdivタグを使えるようになりました。
divタグを使う目的はdt、ddタグをグルーピングすることです。具体的にどのようにdivタグを使うかですが、divタグはdlタグの“直下”にのみ記述できます。例を見てみましょう。
<dl>
<div>
<dt>HTML</dt>
<dd>HTMLとはWebサイトを構築するのに使用するマークアップ言語の名称、及びそれを記述されたファイルの拡張子のこと。「Hyper Text Markup Language（ハイパーテキスト マークアップ言語）」の頭文字を取ってHTMLと呼ばれている。</dd>
</div>
<div>
<dt>CSS</dt>
<dd>CSSはHTMLタグに対して色や背景、線などの装飾、つまり見た目を設定するための言語です。Cascading Style Sheets (カスケーディング・スタイル・シート)の頭文字からCSSと呼ばれています。</dd>
</div>
</dl>グルーピングということで、dt、ddタグ、つまり「名称とその説明」を一つのまとまりとするために使います。
試しにdivタグにインラインCSSを指定して見た目を変えてみましょう。
※インラインCSSの記述方法については以下の記事をご覧ください。
<div style="border-bottom:solid 2px #ff0000; margin-bottom:36px;">- border-bottom:solid 2px #ff0000;
- margin-bottom:36px;
divタグの下（bottom）に2pxの赤い線と36pxの余白を設定してみました。
divタグを使ってグルーピングすることで、説明リスト内の名称と説明、1セットごとにCSSを適用することが可能となりデザインの幅が広がりました。
まとめ
- dl、dt、ddタグを使うと説明リストを作れる
- 説明リストとは“対象のもの”と“その説明”が1つのセットになったリストのこと
- dlタグの中でdtタグとddタグを組み合わせ、divタグでグルーピングが可能
- dlタグの中には複数のdtタグ、ddタグのペアを指定でき、ひとつのdtタグに対して複数のddタグを指定できる