HTML の <dl>
要素は、説明リストを表します。この要素は、一連の用語(<dt>
要素を使用して指定)と説明(<dd>
要素によって提供)をリスト化したものです。一般的な使用例として、用語集の作成やメタデータ(キーと値のペアのリスト)の表示が挙げられます。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
コンテンツカテゴリー | フローコンテンツ、<dl> 要素の子要素が 1 つの名前と値のグループの場合は知覚可能コンテンツ |
---|---|
許可されている内容 |
1 個以上の |
タグの省略 | 不可。開始と終了タグの両方が必要。 |
許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
許可されている 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>
要素) を使用するのは誤りです。そのように機能しますが、これは悪い慣習であり説明リストの意味を不明瞭にします。
アクセシビリティの考慮事項
読み上げソフトによって <dl>
の内容の読み上げは異なります。iOS の VoiceOver など、読み上げソフトによっては <dl>
の内容がリストであるため読み上げないものがあります。このため、リストグループ内の他のリスト項目との関係が分かるような形でリスト項目の内容が書かれていることを確認してください。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
HTML Living Standard <dl> の定義 |
現行の標準 | |
HTML5 <dl> の定義 |
勧告 | |
HTML 4.01 Specification <dl> の定義 |
勧告 | 初回定義 |
ブラウザー実装状況
BCD tables only load in the browser