<dl>: 説明リスト要素

Baseline Widely available

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

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

試してみましょう

<p>コーンウォールの未確認生物:</p>

<dl>
  <dt>ボドミンの怪獣</dt>
  <dd>ボドミンムーアに生息する大型のネコ科動物です。</dd>

  <dt>モーガー</dt>
  <dd>海蛇。</dd>

  <dt>オウルマン</dt>
  <dd>フクロウに似た巨大な生き物です。</dd>
</dl>

p,
dt {
  font-weight: bold;
}

dl,
dd {
  font-size: 0.9rem;
}

dd {
  margin-bottom: 1em;
}

属性

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

compact

この論理属性は、リストをコンパクトなスタイルで表示することを示唆するものです。この属性の解釈はブラウザーによって異なります。代わりに CSS を使用してください。compact 属性と同様の効果を得るには、CSS プロパティ line-height を値 80% で使用することで実現できます。

スクリーンリーダーによっては、<dl> コンテンツの合計数、用語/定義のコンテキスト、ナビゲーション方法の公開方法は様々です。これらの違いは、必ずしもバグではありません。 iOS 14 では、VoiceOver は仮想カーソルで操作する際に、 <dl> の内容がリストであることをアナウンスします（read-all コマンドを使用しなくても）。VoiceOver は <dl> を使ったリストナビゲーションコマンドには対応していません。ARIA の term と definition のロールを <dl> 構造に適用すると、VoiceOver（macOS と iOS）がそのアナウンス方法を調整するので、注意が必要です。

例

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

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>

  <!-- 他の用語と説明 -->
</dl>

結果

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

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

メタデータ

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

html
<dl>
  <dt>名前</dt>
  <dd>ゴジラ</dd>
  <dt>生年</dt>
  <dd>1952</dd>
  <dt>出生地</dt>
  <dd>日本</dd>
  <dt>色</dt>
  <dd>緑</dd>
</dl>

結果

ヒント: CSS でキーと値のセパレーターを定義すると便利でしょう。

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

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

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

html
<dl>
  <div>
    <dt>名前</dt>
    <dd>ゴジラ</dd>
  </div>
  <div>
    <dt>生年</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>出生地</dt>
    <dd>日本</dd>
  </div>
  <div>
    <dt>色</dt>
    <dd>緑</dd>
  </div>
</dl>

結果

メモ

単なる字下げの目的でこの要素（あるいは <ul> 要素）を使用するのは誤りです。そのように機能しますが、これは悪い慣習であり説明リストの意味を不明瞭にします。

用語の説明のインデントを変更するには、CSS の margin プロパティを使用してください。

技術的概要

コンテンツカテゴリー許可されている内容タグの省略許可されている親要素暗黙の ARIA ロール許可されている ARIA ロール DOM インターフェイス

フローコンテンツ、<dl> 要素の子要素が 1 つの名前と値のグループの場合は知覚可能コンテンツ

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

なし。開始タグと終了タグの両方が必須です。

フローコンテンツを受け入れるすべての要素

対応するロールなし

group, list, none, presentation

HTMLDListElement