<dl>: 説明リスト要素
=============

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

試してみましょう
--------

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、`<dl>` 要素の子要素が 1 つの名前と値のグループの場合は知覚可能コンテンツ |
| 許可されている内容 | 1 個以上の `<dt>` 要素とそれに続く 1 個以上の `<dd>` 要素、任意で `<script>` 要素や `<template>` 要素が混在するもの。または (WHATWG HTML や W3C HTML 5.2 以降では) 1 個以上の `<div>` 要素、任意で `<script>` 要素や `<template>` 要素が混在するもの。 |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | `group`,
 `list`, `none` (en-US), `presentation` |
| DOM インターフェイス | `HTMLDListElement` |

属性
--

この要素にはグローバル属性のみがあります。

例
-

### 一つの定義語に対する一つの定義説明


```html
<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>
```


#### 結果

### 複数の定義語に対する一つの定義説明


```html
<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>
```


#### 結果

### 一つの定義語に対し、複数の定義内容をあてる


```html
<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>
```


#### 結果

### 複数の定義語に対し、複数の定義内容をあてる

これまでの例を組み合わせることで、複数の定義語に対し、複数の内容を定義することもできます。

### メタデータ

説明リストは、キーと値のペアのリストであるメタデータの表示にも役立ちます。


```html
<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 でキーと値のセパレーターを定義すると便利でしょう。


```css
dt::after {
  content: ": ";
}
```

### 名前と値のグループを `div` 要素で包む

WHATWG HTML では、`<dl>` 要素内でそれそれの名前と値のグループを、`<div>` 要素でまとめることができます。これはマイクロデータを使用するとき、グループ全体にグローバル属性を適用するとき、あるいはスタイルを設定するために役立ちます。


```html
<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>` 要素）を使用するのは誤りです。そのように機能しますが、これは悪い慣習であり説明リストの意味を不明瞭にします。

用語の説明のインデントを変更するには、CSS の `margin` プロパティを使用してください。

アクセシビリティの考慮
-----------

 スクリーンリーダーによって、`<dl>` コンテンツの合計数、用語/定義のコンテキスト、ナビゲーション方法の公開方法は様々です。これらの違いは、必ずしもバグではありません。
 iOS 14 では、VoiceOver は仮想カーソルで操作する際に、 `<dl>` の内容がリストであることをアナウンスします（read-all コマンドを使用しなくても）。VoiceOver は `<dl>` を使ったリストナビゲーションコマンドには対応していません。ARIA の `term` と `definition` のロールを `<dl>` 構造に適用すると、VoiceOver（macOS と iOS）がそのアナウンス方法を調整するので、注意が必要です。

* VoiceOver on iOS 14 Supports Description Lists
* Brief Note on Description List Support
仕様書
---

| Specification |
| --- |
| HTML Standard # the-dl-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<dt>`
* `<dd>`