<dl>: Элемент списка описаний
=============================

**HTML-элемент `<dl>`** (*от англ.* *Description List*) представляет собой список описаний. Этот элемент служит контейнером для списка пар терминов (определяемых элементом `<dt>`) и их описаний (определяемых элементами `<dd>`). Этот элемент обычно используют при создании глоссария или для отображения метаданных (списка пар ключ-значение).

Интерактивный пример
--------------------

| Категории контента | Потоковый контент, и если потомки элемента `<dl>` включают одну группу имя-значение явный контент. |
| --- | --- |
| Допустимое содержимое | Либо: Ноль или более групп каждая из которых состоит из одного или более элементов `<dt>` за которым следует один или более элементов `<dd>`, необязательно смешанных с элементами `<script>` и `<template>`. Либо: Один или более элементов `<div>`, необязательно смешанных с элементами `<script>` и `<template>`. |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент который принимает потоковый контент. |
| Допустимые ARIA-роли | `group (en-US)`, `presentation (en-US)` |
| DOM-интерфейс | `HTMLDListElement` (en-US) |

Атрибуты
--------

Для данного элемента доступны только глобальные атрибуты.

Примеры
-------

### Одиночные термин и определение


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


Подсказка: Может быть полезно задать разделитель для пары ключ-значение при помощи CSS3, например:


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

### Оборачивание групп имя-значение в `<div>` элементы

WHATWG HTML разрешает оборачивать каждую группу имя-значение в элементе `<dl>` в элемент `<div>`. Это может быть полезно, когда используются микроданные (en-US) или когда глобальные атрибуты применяются к целой группе, или для стилевых целей.


```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>` по-разному. Некоторые скринридеры, такие как VoiceOver на iOS, не будут озвучивать, что содержимое `<dl>` это список. В связи с этим, убедитесь, что содержимое каждого элемента списка написано таким образом, что оно сообщает о своём отношении с другими элементами списка в списке группы.

* CodePen - HTML Buddies: dt & dd
Спецификации
------------

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

Совместимость с браузерами
--------------------------

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

Смотрите также
--------------

* Элемент `<dt>`
* Элемент `<dd>`