<dl>: 説明リスト要素

HTML の <dl> 要素は、説明リストを表します。この要素は、一連の用語（<dt> 要素を使用して指定）と説明（<dd> 要素によって提供）をリスト化したものです。一般的な使用例として、用語集の作成やメタデータ（キーと値のペアのリスト）の表示が挙げられます。

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

属性

この要素にはグローバル属性のみがあります。

例

一つの定義語に対する一つの定義説明

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform,
    graphical web browser developed by the
    Mozilla Corporation and hundreds of
    volunteers.
  </dd>

  <!-- Other terms and descriptions -->
</dl>

複数の定義語に対する一つの定義説明

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    A free, open source, cross-platform,
    graphical web browser developed by the
    Mozilla Corporation and hundreds of
    volunteers.
  </dd>

  <!-- Other terms and descriptions -->
</dl>

一つの定義語に対し、複数の定義内容をあてる

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform,
    graphical web browser developed by the
    Mozilla Corporation and hundreds of
    volunteers.
  </dd>
  <dd>
    The Red Panda also known as the Lesser
    Panda, Wah, Bear Cat or Firefox, is a
    mostly herbivorous mammal, slightly larger
    than a domestic cat (60 cm long).
  </dd>

  <!-- Other terms and descriptions -->
</dl>

複数の定義語に対し、複数の定義内容をあてる

これまでの例を組み合わせることで、複数の定義語に対し、複数の内容を定義することもできます。

メタデータ

説明リストは、キーと値のペアのリストであるメタデータの表示にも役立ちます。

<dl>
  <dt>Name</dt>    
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>

ヒント: CSS でキーと値のセパレーターを定義すると便利でしょう。

dt::after {
  content: ": ";
}

名前と値のグループを <div> 要素で包む

WHATWG HTML では、<dl> 要素内でそれそれの名前と値のグループを、<div> 要素で包むことができます。これは microdata を使用するとき、グループ全体に グローバル属性 を適用するとき、あるいはスタイルを設定するために役立ちます。

<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>

メモ

単なる字下げの目的でこの要素 (あるいは <ul> 要素) を使用するのは誤りです。そのように機能しますが、これは悪い慣習であり説明リストの意味を不明瞭にします。

用語の説明のインデントを変更するには、CSS の margin プロパティを使用します。

アクセシビリティの考慮事項

読み上げソフトによって <dl> の内容の読み上げは異なります。iOS の VoiceOver など、読み上げソフトによっては <dl> の内容がリストであるため読み上げないものがあります。このため、リストグループ内の他のリスト項目との関係が分かるような形でリスト項目の内容が書かれていることを確認してください。

• CodePen - HTML Buddies: dt & dd

仕様書

ブラウザー実装状況

関連情報

• <dt> 要素
• <dd> 要素