<dl>: 説明リスト要素

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

コンテンツカテゴリー フローコンテンツ<dl> 要素の子要素が 1 つの名前と値のグループの場合は知覚可能コンテンツ
許可されている内容

1 個以上の <dt> 要素とそれに続く 1 個以上の <dd> 要素、任意で <script> 要素や <template> 要素が混在するもの。
または 1 個以上の <div> 要素、任意で <script> 要素や <template> 要素が混在するもの。

タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 フローコンテンツを受け入れるすべての要素
許可されている ARIA ロール group, presentation
DOM インターフェイス HTMLDListElement

属性

この要素にはグローバル属性のみがあります。

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

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

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

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

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

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

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

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

メタデータ

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

<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 プロパティを使用します。

アクセシビリティの考慮事項

読み上げソフトによって <dl> の内容の読み上げは異なります。iOS の VoiceOver など、読み上げソフトによっては <dl> の内容がリストであるため読み上げないものがあります。このため、リストグループ内の他のリスト項目との関係が分かるような形でリスト項目の内容が書かれていることを確認してください。

仕様書

仕様書 状態 備考
HTML Living Standard
<dl> の定義
現行の標準
HTML5
<dl> の定義
勧告
HTML 4.01 Specification
<dl> の定義
勧告 初回定義

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
dlChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報