このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
<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>Cryptids of Cornwall:</p><dl> <dt>Beast of Bodmin</dt> <dd>A large feline inhabiting Bodmin Moor.</dd> <dt>Morgawr</dt> <dd>A sea serpent.</dd> <dt>Owlman</dt> <dd>A giant owl-like creature.</dd></dl>p,dt { font-weight: bold;}dl,dd { font-size: 0.9rem;}dd { margin-bottom: 1em;}| コンテンツカテゴリー | フローコンテンツ、<dl> 要素の子要素が 1 つの名前と値のグループの場合は知覚可能コンテンツ |
|---|---|
| 許可されている内容 | 1 個以上の |
| タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | group,list,none,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> 要素でまとめることができます。これはマイクロデータを使用するとき、グループ全体にグローバル属性を適用するとき、あるいはスタイルを設定するために役立ちます。
<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> 要素）を使用するのは誤りです。そのように機能しますが、これは悪い慣習であり説明リストの意味を不明瞭にします。
アクセシビリティの考慮
スクリーンリーダーによって、<dl> コンテンツの合計数、用語/定義のコンテキスト、ナビゲーション方法の公開方法は様々です。これらの違いは、必ずしもバグではありません。iOS 14 では、VoiceOver は仮想カーソルで操作する際に、<dl> の内容がリストであることをアナウンスします（read-all コマンドを使用しなくても）。VoiceOver は<dl> を使ったリストナビゲーションコマンドには対応していません。ARIA のterm とdefinition のロールを<dl> 構造に適用すると、VoiceOver（macOS と iOS）がそのアナウンス方法を調整するので、注意が必要です。
仕様書
| Specification |
|---|
| HTML # the-dl-element |