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

コンテンツカテゴリー フローコンテンツ<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> の定義
勧告 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり1 あり あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり

関連情報

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

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