dl 要素

概要

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

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

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

属性

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

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>

以下の様に出力されます。

Image:HTML-dl1.png

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

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

以下の様に出力されます。

Image:HTML-dl2.png

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

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

以下の様に出力されます。

Image:HTML-dl3.png

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

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

メタデータ

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

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

注意

単なる字下げの目的でこの要素 (あるいは <ul> 要素) を使用するのは誤りです。HTML タグはあくまで、文書の各部位の意味を表すものです。

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

仕様

仕様書 策定状況 コメント
WHATWG HTML Living Standard
The definition of '<dl>' in that specification.
Living Standard  
HTML5
The definition of '<dl>' in that specification.
勧告  
HTML 4.01 Specification
The definition of '<dl>' in that specification.
勧告 最初の定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 (有) (有) (有) (有)
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート (有) (有) (有) (有) (有)

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, ethertank
 最終更新者: yyss,