dl 要素

概要

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

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

• コンテンツカテゴリ フローコンテンツ / <dl> 要素の子要素が 1 つの名前の値のペアの場合はパルパブルコンテンツ
• 許可された内容 0 個以上の <dt> 要素とそれに続く 1 個以上の <dd> 要素。また、それらのセットの繰り返し。
• タグの省略 不可。開始と終了タグの両方が必要。
• 許可された親要素 フローコンテンツを受け入れる全ての要素
• DOM インタフェース HTMLDListElement

属性

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

compact

定義語句と定義説明の同行表示を強制する。Internet Explorer のみで動作。

例

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

<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: ": ";}

注意

この要素の子となる dd 要素は、殆どのブラウザで字下げ表示のデフォルトスタイルを持っていますが、意味を伴わない、単なる自下げの目的でこれを使用するのは誤りです。他の特徴的なスタイルを持つ要素に関しても同様です。HTML タグはあくまで、文書の各部位の意味を表すものです。

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

仕様

ブラウザ実装状況

関連情報

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