<dl> / <dt> / <dd>

<dl>
  <dt>用語1</dt>
  <dd>用語1の説明</dd>
  <dt>用語2</dt>
  <dd>用語2の説明</dd>
</dl>

sample_dl_dt_dd.html

<!-- 基本的な定義リスト（用語集） -->
<dl>
  <dt>変数</dt>
  <dd>値を格納するための名前付きの入れ物です。プログラム中で何度でも値を変更できます。</dd>

  <dt>関数</dt>
  <dd>特定の処理をまとめて名前を付けたものです。必要なときに呼び出して再利用できます。</dd>

  <dt>配列</dt>
  <dd>複数の値をひとつの変数にまとめて管理できるデータ構造です。</dd>
</dl>

<!-- 1つの用語に複数の説明（ddを複数並べる） -->
<dl>
  <dt>JavaScript</dt>
  <dd>Webブラウザ上で動作するプログラミング言語です。</dd>
  <dd>Node.jsを使えばサーバーサイドでも実行できます。</dd>
  <dd>ECMAScriptという仕様に基づいています。</dd>
</dl>

<!-- FAQへの活用 -->
<dl>
  <dt>Q. HTMLとCSSの違いは何ですか？</dt>
  <dd>A. HTMLはページの構造を定義し、CSSはその見た目を装飾します。</dd>

  <dt>Q. プログラミングを始めるのに必要なものは？</dt>
  <dd>A. テキストエディタとブラウザがあれば始められます。</dd>
</dl>

<!-- 商品・プロフィールのメタ情報表示 -->
<dl>
  <dt>発売日</dt>
  <dd>2025年4月1日</dd>

  <dt>価格</dt>
  <dd>2,980円（税込）</dd>

  <dt>対応OS</dt>
  <dd>Windows 10以降</dd>
  <dd>macOS 12以降</dd>
</dl>

定義リストが表示されます。『<dt>』（用語）は通常の文字サイズで、『<dd>』（説明）はやや字下げされて表示されます。

サンプルページはこちら

『<dl>』は単純な箇条書きリスト（『<ul>』・『<li>』）とは異なり、「用語と説明」「質問と回答」「名前と値」のようなペア構造を表現するのに適しています。FAQ（よくある質問）や用語集のマークアップによく使われます。

1つの『<dt>』に対して複数の『<dd>』を続けることも可能です。また、複数の『<dt>』を連続して記述し、最後にひとつの『<dd>』でまとめることもできます。ただし、『<dl>』の直接の子要素は『<dt>』か『<dd>』（またはHTML5.2以降では『<div>』によるグループ化）のみ許可されており、他のタグを直接置くことはできません。

『<ul>』や『<ol>』については 『ul / ol / li』 のページをご覧ください。

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

4 以降 ○

3 以前 ×

Edge

12 以降 ○

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

15 以降 ○

14 以前 ×

モバイル

iOS Safari

3.2 以降 ○

Android Browser

4.4 以降 ○

4 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN に基づいています。

『<dl>』のデフォルトスタイルは地味ですが、CSSで整形すると用語集・FAQ・プロフィールなどに適したレイアウトを作れます。

/* 定義リストを横並び（用語: 説明）にする */
dl {
  display: grid;
  grid-template-columns: max-content 1fr; /* 用語列は内容に合わせ、説明列は残り */
  gap: 0.5em 1em;
  margin: 1em 0;
}

dt {
  font-weight: bold;
  color: #333;
}

dd {
  margin: 0; /* デフォルトのインデントをリセット */
  color: #555;
}

/* 用語とデータに区切り線を入れる */
dl.with-border dt,
dl.with-border dd {
  border-bottom: 1px solid #eee;
  padding: 0.5em 0;
}

<!-- プロフィール表示の例 -->
<dl class="profile">
  <dt>名前</dt>
  <dd>山崎 遼太郎</dd>

  <dt>職種</dt>
  <dd>フロントエンドエンジニア</dd>

  <dt>好きな言語</dt>
  <dd>TypeScript, Python</dd>
</dl>

『<dl>』は「名前と値のペア」を表す用途に幅広く使えます。ul/olではなくdlを選ぶべき場面をまとめます。