<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 個以上の |
タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
暗黙の 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>
結果
メモ
アクセシビリティの考慮
スクリーンリーダーによって、<dl>
コンテンツの合計数、用語/定義のコンテキスト、ナビゲーション方法の公開方法は様々です。これらの違いは、必ずしもバグではありません。
iOS 14 では、VoiceOver は仮想カーソルで操作する際に、 <dl>
の内容がリストであることをアナウンスします(read-all コマンドを使用しなくても)。VoiceOver は <dl>
を使ったリストナビゲーションコマンドには対応していません。ARIA の term
と definition
のロールを <dl>
構造に適用すると、VoiceOver(macOS と iOS)がそのアナウンス方法を調整するので、注意が必要です。
仕様書
Specification |
---|
HTML Standard # the-dl-element |
ブラウザーの互換性
BCD tables only load in the browser