HTML の dl / dt / dd の使い方 – 説明リスト、用語集、メタデータを正しく書く

HTML の dl、dt、dd は、用語と説明、項目名と値など、互いに関連する情報を表すための要素です。以前は「定義リスト」と呼ばれることが多くありましたが、現在の HTML 仕様では、用途を定義だけに限定しない「説明リスト」として扱います。

dl はリスト全体、dt は用語または名前、dd は説明、定義、値を表します。単に文章を字下げするための要素ではなく、名前と値の関係を HTML の構造として示すために使います。

dl / dt / dd の役割

最小構成は、1 つの dt の後に 1 つの dd を置く形です。

<dl>
  <dt>ギター</dt>
  <dd>一般に 6 本の弦を持ち、弦を弾いて演奏する楽器です。</dd>

  <dt>ベース</dt>
  <dd>低音域を担当し、一般に 4 本の弦を持つ楽器です。</dd>
</dl>

ブラウザの既定スタイルでは dd が字下げされることがあります。しかし、見た目の字下げが目的なのではありません。用語と説明の関係があるから dl を選び、見た目は CSS で調整します。

定義だけでなく、メタデータにも使える

dl は辞書や用語集だけの要素ではありません。WHATWG の HTML Living Standard は、用語と定義のほか、メタデータの項目と値、質問と回答なども名前と値のグループの例に挙げています。

<dl>
  <dt>公開日</dt>
  <dd><time datetime="2026-07-10">2026 年 7 月 10 日</time></dd>

  <dt>著者</dt>
  <dd>山田太郎</dd>

  <dt>対象</dt>
  <dd>HTML を学び始めた人</dd>
</dl>

この例では、公開日、著者、対象が名前で、それぞれの内容が値です。商品の仕様、記事情報、問い合わせ先、イベント概要など、行と列を持つ表にするほどではない名前と値の組み合わせにも使えます。

用語を定義する場合は dfn を組み合わせる

dt は「名前」を表しますが、それだけで中身が定義対象であることまでは示しません。用語を明示的に定義する場合は、dt の中で dfn を使います。

<dl>
  <dt><dfn>説明リスト</dfn></dt>
  <dd>名前と値のグループを表す HTML のリストです。</dd>
</dl>

dt と dfn は役割が異なります。dt は説明リスト内の名前を作り、dfn は、その箇所が用語の定義であることを示します。

1 つの説明に複数の用語を対応させる

同じ意味を持つ別表記などは、複数の dt に 1 つの dd を対応させられます。

<dl>
  <dt>サーバー</dt>
  <dt>サーバ</dt>
  <dd>ネットワークを通じて機能やデータを提供するコンピューターまたはソフトウェアです。</dd>
</dl>

反対に、1 つの dt に複数の dd を続けることもできます。ただし、HTML 仕様では同じグループ内の複数の値は選択肢として扱われます。1 つの長い説明を段落に分けたいだけなら、dd を増やさず、1 つの dd の中に複数の p を置きます。

<dl>
  <dt>HTML</dt>
  <dd>
    <p>Web ページの構造と意味を記述するマークアップ言語です。</p>
    <p>見た目は主に CSS、動作は JavaScript と組み合わせて制御します。</p>
  </dd>
</dl>

グループを div で囲む

現行の HTML では、各 dt と dd のグループを div で囲めます。グループ単位で CSS を適用したい場合や、microdata などの属性を付けたい場合に使えます。

<dl class="article-meta">
  <div>
    <dt>公開日</dt>
    <dd>2026 年 7 月 10 日</dd>
  </div>
  <div>
    <dt>カテゴリー</dt>
    <dd>HTML</dd>
  </div>
</dl>

dl の直下をすべて div グループにするか、dt と dd を直接置くかは、1 つのリスト内で混在させない方が構造を追いやすくなります。

ul / ol / table との使い分け

たとえば、1 つの商品について「価格」「重量」「保証期間」を示すなら dl が候補になります。複数の商品を同じ列で比較するなら、行と列の関係を持つ table の方が自然です。見た目が縦に並ぶか横に並ぶかではなく、情報同士の関係で要素を選びます。

CSS で読みやすく整える

div でグループ化した説明リストは、各グループを Grid にすると項目名と値を揃えられます。

.article-meta {
  margin: 1.5rem 0;
}

.article-meta > div {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
  gap: 0.5rem 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #d8dee6;
}

.article-meta dt {
  font-weight: 700;
}

.article-meta dd {
  min-width: 0;
  margin: 0;
}

@media (max-width: 40rem) {
  .article-meta > div {
    grid-template-columns: 1fr;
  }
}

スマートフォンでは 1 列に戻し、長い URL や文字列がある場合にも値の列が画面幅を押し広げないようにします。CSS で見た目を変えても、HTML 上の名前と値の関係は維持されます。

アクセシビリティで注意すること

• 字下げのためだけに dl を使わない
• dt と dd の対応が読み取れる順序で記述する
• ネイティブな HTML の意味を活かし、必要性を確認せずに ARIA role を追加しない
• CSS で dt と dd を離しすぎず、拡大表示や狭い画面でも対応関係を保つ

説明リストの読み上げ方は、ブラウザとスクリーンリーダーの組み合わせによって差があります。独自の role で構造を上書きするより、まず正しい要素と文書順を使い、実際に利用する環境で確認することが基本です。

WordPress ではカスタム HTML ブロックを使う

WordPress のブロックエディターで dl を直接作る操作が用意されていない場合は、カスタム HTML ブロックへ記述します。編集後はプレビューを開き、テーマの CSS による余白、字下げ、モバイル表示を確認します。

表示を整えるために段落ブロックや表ブロックへ置き換えるのではなく、先に情報の意味に合う HTML を選び、その後で CSS を調整します。編集画面の都合と、公開ページの文書構造は分けて考えます。

参考情報

参考書籍

まとめ

dl は名前と値のグループ全体、dt は用語または名前、dd は説明、定義、値を表します。用語集だけでなく、記事情報や商品の属性などのメタデータにも使えます。

箇条書きなら ul / ol、行と列を比較するなら table、名前と値の関係を示すなら dl が基本です。見た目ではなく、情報同士の関係から HTML 要素を選びます。

説明リストを字下げの道具として使わず、HTML で意味を記述してから CSS で表示を整えることが、保守しやすく読み取りやすいマークアップにつながります。

関連記事

pre / code を CSS で横スクロールさせる – overflow-x と white-space の使い分け