dl 要素

HTML の 説明リスト要素（<dl>）は、用語とその説明のセットのリストを表します。 一般的な使用例として、用語集の作成やメタデータ (キーと値のペアのリスト) の表示が挙げられます。

HTML5 より前では、<dl> は定義リスト (Definition List)として知られていました。

属性

他の全ての要素と同様に、この要素はグローバル属性を持ちます。

compact

定義語句と定義説明の同行表示を強制する。この属性は、現在サポートしていません。

例

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

<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 definitions -->
</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 definitions -->
</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 definitions -->
</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>

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

dt:after {
  content: ": ";
}

Wrapping name-value groups in <div> elements

WHATWG HTML allows wrapping each name-value group in a <dl> element in a <div> element. This can be useful when using microdata, or when global attributes apply to a whole group, or for styling purposes.

<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> 要素) を使用するのは誤りです。HTML タグはあくまで、文書の各部位の意味を表すものです。

また、デフォルトスタイルは全て CSS で変更可能です。例えば dd 要素のインデントを変更したい場合は、margin プロパティなどを使用すればよいでしょう。

仕様

ブラウザ実装状況

関連情報

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