この記事の要点

<dl> 要素は「名前と説明」のペアを並べる 定義リスト（Description List） <dt> が用語（名前・キー）、<dd> がその説明・値 1 つの <dt> に複数 <dd>、または逆に複数 <dt> に 1 つの <dd> も可能 用語集・FAQ・メタデータ・フォームのキャプションなどペア構造のあるものに向く 視覚スタイルは CSS（display:grid / flex）で自由に組める

dl 要素とは

<dl>（Description List）要素は、「用語」と「その説明」のペアを並べるためのリスト要素です。HTML5 で「Description List（記述リスト）」と再定義され、「キーと値」「名前と説明」「質問と回答」など、ペアの構造を持つ情報全般に使えるようになりました。

3 種類あるリスト要素（<ul> / <ol> / <dl>）のうち、<dl> だけは項目が単一の値ではなく 「ペア」になっている点が特徴です。

基本構文

<dl>
  <dt>HTML</dt>
  <dd>Webページの構造を記述するマークアップ言語。</dd>

  <dt>CSS</dt>
  <dd>Webページの見た目を指定するスタイルシート言語。</dd>

  <dt>JavaScript</dt>
  <dd>Webページに動きや対話性を加えるプログラミング言語。</dd>
</dl>

子要素の役割

要素	意味	典型的な内容
<dt>	Description Term — 用語・名前・キー	言葉、ラベル、見出し
<dd>	Description Details — 説明・値	定義、答え、本文
<dl>	Description List — リスト全体のコンテナ	—

HTML5 以降は <dl> 内に <div> でペアをグループ化することも認められています（マイクロデータや CSS Grid と組み合わせやすい）。

複数 dd / 複数 dt のパターン

1 つの用語に複数の説明、または複数の用語に共通の説明を割り当てることもできます。

<!-- 1 用語に複数の説明 -->
<dl>
  <dt>クッキー</dt>
  <dd>ブラウザに保存される小さなデータ。</dd>
  <dd>ログイン状態の保持や行動追跡に使われる。</dd>
</dl>

<!-- 複数用語に 1 つの説明（同義語） -->
<dl>
  <dt>HTTP</dt>
  <dt>HyperText Transfer Protocol</dt>
  <dd>WebブラウザとWebサーバ間で情報をやり取りするためのプロトコル。</dd>
</dl>

div でグループ化（HTML5）

各ペアを <div> で括ると、CSS Grid / Flex でレイアウトしやすくなります。

<dl class="glossary">
  <div>
    <dt>API</dt>
    <dd>アプリケーション間でやり取りするためのインタフェース。</dd>
  </div>
  <div>
    <dt>SDK</dt>
    <dd>開発キット。ライブラリやサンプル、ドキュメントを含む。</dd>
  </div>
</dl>

CSS で 2 カラムに整形する

.glossary { display: grid; grid-template-columns: 8em 1fr; gap: 8px 16px; }
.glossary dt { font-weight: bold; }
.glossary dd { margin: 0; }

/* div でグループ化したパターン */
.glossary > div { display: contents; }

典型的なユースケース

• 用語集 / グロッサリ — 「言葉」と「定義」のペア
• FAQ — 「質問」と「回答」のペア（<dt> に質問、<dd> に回答）
• メタデータ — 「項目名」と「値」のペア（投稿者・更新日・カテゴリ等）
• 商品スペック — 「スペック名」と「値」（重量、サイズ、価格）
• フォームのラベル + 値 — 入力画面ではなく確認・閲覧画面の表示用

アクセシビリティ

スクリーンリーダーは <dl> を「定義リスト、N 項目」と読み上げ、<dt> と <dd> のペアを認識します。視覚的に 2 カラムに見せたいだけなら CSS で十分で、<table> を選ぶ必要はありません。「項目とその説明」という意味があるなら <dl>、「行 × 列のデータ」なら <table> が原則です。

よくある誤用

• 段落の連続を dl で書く — ペア構造でないなら <ul> / <p> を使う
• 装飾目的のインデント — <dd> の既定インデントを使った字下げ（CSS の margin / padding で表現すべき）
• <dt> の中に <dd> を入れ子 — 構文エラー。<dl> の直下に並列で並べる
• 表的な集計データを dl で書く — 列ごとの比較が必要なら <table> が適切

ul / ol / table との使い分け

コンテンツの形	適した要素	例
順不同の項目列挙	<ul>	機能の箇条書き、メニュー
順序が意味を持つ項目列挙	<ol>	手順、ランキング
「名前 → 説明」のペア	<dl>	用語集、メタデータ、FAQ
行×列の集計データ	<table>	売上表、比較表

FAQ

Q: 装飾的なインデントだけ欲しいのですが？
A: <dl> を使うべきではありません。意味のない要素を選ぶと、スクリーンリーダーが「定義リスト 1 項目」と読み上げてしまい混乱します。CSS の padding-left で表現します。

Q: dt と dd の中に複数段落を書ける？
A: <dd> 内には <p> や <ul> などのブロック要素も入れられます。<dt> 内はフレージングコンテンツ（インライン）のみです。

Q: マイクロデータと組み合わせられる？
A: <dl> の中の <dt> / <dd> に itemprop を付与してメタデータを構造化できます。<div> でグループ化しておくと itemscope を切り分けやすくなります。

関連

• dt要素 — ペアの「用語」側
• dd要素 — ペアの「説明」側
• リスト — リスト系要素の親カテゴリ
• ul要素 — 順序のないリスト
• ol要素 — 順序のあるリスト
• li要素 — リストの項目
• HTML — カテゴリトップ