Widely available すべての主要ブラウザで対応済み。安心して使用可能。

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
1
12
1
≤4
18
≤3.2
DOM API

HTMLDListElement インターフェイスは、(継承によって使用できる通常の HTMLElement インターフェイスのものの他に)定義リスト要素 (dl) を操作するための特別なプロパティを提供します。

1
12
1
3
18
1
その他

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

1
12
1
≤4
18
≤3.2

は HTML の要素で、説明または定義リストの中で用語を表す部分であり、dl の子要素としてのみ用いることができます。普通は dd 要素が続きます。しかし、複数の 要素が続くと、複数の用語がすぐ後に続く dd 要素で定義されていることを表します。

1
12
1
≤4
18
≤3.2
1+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • Firefox 4 より前のバージョンでは、この要素は `HTMLElement` の代わりに `HTMLSpanElement` インターフェースを使って実装されていた。

基本構文

HTML
<dl>
  <dt>HTML</dt>
  <dd>A markup language used to define the structure of web pages</dd>
  <dt>CSS</dt>
  <dd>A stylesheet language that defines the appearance of web pages</dd>
</dl>

ライブデモ

basic descriptionlist

term and Description. pea display. with dl / dt / dd

プレビュー全画面表示

horizontalarrangementlayout

Dt and dd horizontalarrangement to placement. with CSS Grid

プレビュー全画面表示

card style. Descriptionlist

Dl card style to stylingglossary.

プレビュー全画面表示

実務での使いどころ

  • Description list の活用

    <dd> は HTML の要素で、説明リスト要素 (<dl>) 内で、その前の用語 (<dt>) の説明、定義、値などを示します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。