<dl>: 説明リスト要素
<dl>
は HTML の要素で、説明リストを表します。この要素は、一連の用語(<dt>
要素を使用して指定)と説明(<dd>
要素によって提供)をリスト化したものです。一般的な使用例として、用語集の作成やメタデータ(キーと値のペアのリスト)の表示が挙げられます。
試してみましょう
コンテンツカテゴリー | フローコンテンツ、<dl> 要素の子要素が 1 つの名前と値のグループの場合は知覚可能コンテンツ |
---|---|
許可されている内容 |
1 個以上の |
タグの省略 | 不可。開始と終了タグの両方が必要。 |
許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
暗黙の ARIA ロール | 対応するロールなし |
許可されている ARIA ロール | group , list , none (en-US) , 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>
メモ
アクセシビリティの考慮
画面リーダーによって <dl>
の内容の読み上げは異なります。 iOS 14 では、 VoiceOver は仮想カーソルで操作する際に、 <dl>
の内容がリストであることをアナウンスします(read-all コマンドを使用しなくても)。このため、リストグループ内の他のリスト項目との関係が分かるような形でリスト項目の内容が書かれていることを確認してください。
仕様書
Specification |
---|
HTML Standard # the-dl-element |
ブラウザーの互換性
BCD tables only load in the browser