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

コンテンツカテゴリー フローコンテンツ / <dl> 要素の子要素が 1 つの名前と値のグループの場合はパルパブルコンテンツ
許可された内容 0 個以上の <dt> 要素とそれに続く 1 個以上の <dd> 要素、任意で <script> 要素や <template> 要素が混在。
または (WHATWG HTML において) 1 個以上の <div> 要素、任意で <script> 要素や <template> 要素が混在。
タグの省略 不可。開始と終了タグの両方が必要。
許可された親要素 フローコンテンツ を受け入れるすべての要素
許可された ARIA ロール group, presentation
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 descriptions -->
</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 descriptions -->
</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 descriptions -->
</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>

ヒント: 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> 要素) を使用するのは誤りです。そのように機能しますが、これは悪い慣習であり説明リストの意味を不明瞭にします。

定義語のインデントを変更するには、CSSmargin プロパティを使用します。

仕様

仕様書 策定状況 コメント
HTML Living Standard
<dl> の定義
現行の標準  
HTML5
<dl> の定義
勧告  
HTML 4.01 Specification
<dl> の定義
勧告 最初の定義

ブラウザー実装状況

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

関連情報

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

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