💡 この記事でわかること
- dl・dt・dd要素とは何か
- 基本的な書き方
- 複数の用語・説明を組み合わせる方法
- よくある使い道(用語集・プロフィール欄など)
- ul・olとの違い、初心者がつまずきやすいポイント
1. dl・dt・dd要素とは？
dl要素とは、
👉 「用語」と「その説明」をセットで並べる「説明リスト」を作るためのタグです。
dt要素が説明したい用語(見出し)、dd要素がその説明文にあたります。dl要素の中に、dt・ddのペアを必要な数だけ並べて使います。
「HTML: Webページの構造を作るための言語」のように、単語とその意味・補足をセットで並べたい場面でよく使われます。
2. 基本的な書き方
dl要素の中に、dt要素(用語)とdd要素(説明)を交互に並べます。
<dl>
<dt>HTML</dt>
<dd>Webページの構造を作るためのマークアップ言語</dd>
<dt>CSS</dt>
<dd>Webページの見た目を装飾するための言語</dd>
</dl>💡 ブラウザの標準スタイルでは、dd要素の内容が少し右にインデントされて表示され、用語とその説明の関係が見た目でも分かりやすくなります。
3. 複数の用語・説明を組み合わせる
1つの用語に複数の説明を付けたり、逆に複数の用語に1つの説明をまとめて付けたりすることもできます。
<dl>
<dt>JavaScript</dt>
<dd>Webページに動きを付けるためのプログラミング言語</dd>
<dd>ブラウザ上で標準的に実行できる</dd>
<dt>HTML</dt>
<dt>HyperText Markup Language</dt>
<dd>Webページの構造を表すマークアップ言語</dd>
</dl>👉 dt要素を連続して並べると「同じ意味を指す複数の呼び方」、dd要素を連続して並べると「1つの用語に対する複数の補足説明」を表せます。
4. よくある使い道
用語集・辞書的なページ
専門用語とその解説を並べる用語集ページは、dl・dt・ddが最も向いている典型的な例です。
プロフィール欄・スペック表
「名前: 山田太郎」「役職: エンジニア」のような、項目名と値がセットになったプロフィール欄やスペック表にもよく使われます。
💡 似たような項目名と値の並びはtable要素でも表現できますが、表として比較する意図がなく、単に項目名と値のペアを並べたいだけの場合はdlの方がシンプルに書けます。
5. ul・olとの違い、初心者がつまずきやすいポイント
単なる箇条書きにはul・olを使う
「用語と説明」のような対になる関係がなく、ただ項目を並べたいだけの場合はul要素(順序なし)やol要素(順序あり)を使います。dlは「ペアになっている」という関係性を表すためのタグなので、単純な箇条書きに使うのは適切ではありません。
dt・ddの数は自由
「dtは必ず1つ、ddも必ず1つ」という決まりはなく、dt・ddはそれぞれ0個以上を自由に組み合わせて並べられます。ただし、dl要素の直下にはdt・dd以外の要素(見出しタグなど)を直接置くことはできない点に注意しましょう。
まとめ
dl・dt・dd要素を使うと、用語とその説明をセットにした説明リストが作れます。
- dl(全体)・dt(用語)・dd(説明)の3つで構成する
- 1つの用語に複数の説明、複数の用語に1つの説明も可能
- 用語集やプロフィール欄・スペック表との相性がよい
- 単なる箇条書きにはul・olを使う
まずは2〜3個の用語と説明を、dl・dt・ddで書いてみましょう。