<dl>: 説明リスト要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

試してみましょう

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

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

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

属性

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

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

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

結果

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

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

結果

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

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

結果

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

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

メタデータ

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

html
<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 でキーと値のセパレーターを定義すると便利でしょう。

css
dt::after {
  content: ": ";
}

名前と値のグループを div 要素で包む

WHATWG HTML では、<dl> 要素内でそれそれの名前と値のグループを、<div> 要素でまとめることができます。これはマイクロデータを使用するとき、グループ全体にグローバル属性を適用するとき、あるいはスタイルを設定するために役立ちます。

html
<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 14 では、VoiceOver は仮想カーソルで操作する際に、 <dl> の内容がリストであることをアナウンスします(read-all コマンドを使用しなくても)。VoiceOver は <dl> を使ったリストナビゲーションコマンドには対応していません。ARIA の termdefinition のロールを <dl> 構造に適用すると、VoiceOver(macOS と iOS)がそのアナウンス方法を調整するので、注意が必要です。

仕様書

Specification
HTML
# the-dl-element

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
dl

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報