「用語とその説明」「項目名と内容」のように、対になった情報を並べたい場面があります。商品スペック表やプロフィール、FAQ などがその典型です。こうした名前と値のペアをマークアップするのに最適なのが、dl・dt・dd による定義リストです。この記事では、3つのタグの役割と書き方、複数組み合わせる方法を、初心者の方にも分かるように解説します。
目次
定義リスト（dl）とは
定義リストは、「項目名」と「その説明」がセットになった情報を表すためのリストです。箇条書きの ul や番号付きの ol が「並列の項目」を表すのに対し、定義リストは「名前 ＝ 値」という対応関係を表現できるのが特徴です。3つのタグを組み合わせて作ります。
| タグ | 意味（正式名称） | 役割 |
|---|---|---|
dl | description list | 定義リスト全体を囲む親要素 |
dt | description term | 項目名（用語・名前） |
dd | description details | その説明・内容 |
dt の「t」は term（用語）、dd の最後の「d」は details（説明）と覚えると区別しやすいでしょう。
基本の書き方
まずは用語とその説明を3組並べた、もっとも基本的な例です。dl の中に dt と dd を交互に書いていきます。
<dl>
<dt>HTML</dt>
<dd>Webページの構造を作るためのマークアップ言語です。</dd>
<dt>CSS</dt>
<dd>Webページの見た目を整えるための言語です。</dd>
<dt>JavaScript</dt>
<dd>Webページに動きや対話的な機能を加える言語です。</dd>
</dl>ブラウザの初期スタイルでは、dt（項目名）が左端に表示され、dd（説明）は少し字下げ（インデント）されて表示されます。この字下げは dd に付く margin によるもので、CSS で自由に調整できます。
1つの項目に複数の説明を付ける
定義リストは dt と dd が必ず1対1である必要はありません。1つの dt に対して dd を複数並べたり、逆に複数の dt に1つの dd をまとめたりできます。たとえば1つの用語に複数の意味があるときは、次のように書けます。
<dl>
<dt>営業時間</dt>
<dd>平日 9:00〜18:00</dd>
<dd>土曜 9:00〜12:00</dd>
</dl>このように、1つの項目名に対して内容が複数あるケースを自然に表現できるのが、定義リストの便利なところです。商品の仕様一覧やプロフィール欄など、項目数の決まったデータの表示によく合います。
1組ずつグループ化したいとき
CSS でレイアウトを組むとき、「項目名と説明のペア」を1つの箱として扱いたいことがあります。その場合は、dt と dd のまとまりを div で囲むことが許されています。これは定義リストで認められた使い方です。
<dl>
<div class="row">
<dt>価格</dt>
<dd>1,200円</dd>
</div>
<div class="row">
<dt>在庫</dt>
<dd>あり</dd>
</div>
</dl>こうしておくと、.row に display: flex; を指定して項目名と説明を横並びにする、といったレイアウトが組みやすくなります。ペアの区切りが明確になり、スタイルも当てやすくなります。
table との使い分け
「名前と値のペア」は表（table）でも表現できるため、どちらを使うか迷うことがあります。判断の目安は、データの形が「行と列の二次元」か「項目名と内容の組み合わせ」かです。
たとえば「日付・売上・客数」のように複数の列が交差する二次元のデータは table が適しています。一方、「氏名：山田太郎」「住所：東京都…」のように、1つの項目に対して1つの内容が並ぶだけのものは、定義リストの方が構造を素直に表せます。見出し行のない単純なペアの羅列なら、定義リストを選ぶとよいでしょう。
使うときに気をつけること
dt と dd は dl の直接の子にする
dt と dd は、dl の中（または前述の div でグループ化した中）に書きます。dl の外で単独に使ったり、ul の中に入れたりはできません。定義リストは必ず dl から始める、と覚えておきましょう。
見た目の字下げは CSS で調整する
dd の字下げが不要なときや、もっと余白を空けたいときは、HTML を変えるのではなく CSS で margin を調整します。マークアップは構造を表すもの、見た目は CSS で整えるもの、という役割分担を意識すると、メンテナンスしやすいコードになります。
レイアウト目的だけで使わない
定義リストは「名前と値の対応」という意味を持つタグです。単に字下げしたい、横並びにしたいといった見た目の理由だけで使うのは本来の用途から外れます。あくまで「項目名と説明のペア」を表すときに使う、と判断基準を持っておくと、適切なマークアップを選べます。
まとめ
定義リスト（dl・dt・dd）は、名前と値のペアを意味的に正しくマークアップできる便利なリストです。要点を振り返っておきましょう。
dlが全体、dtが項目名、ddがその説明を表す- 1つの
dtに複数のddを付けるなど、対応は1対1でなくてよい - ペアごとに
divでグループ化してレイアウトに使える - 二次元データは
table、項目名と内容の組み合わせは定義リストが向く
プロフィールや商品スペックなど、項目名と内容が対になる情報は、定義リストでマークアップすると構造が明確になり、検索エンジンにも内容が伝わりやすくなります。場面に合わせてぜひ使い分けてみてください。