<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) |
Атрибуты
Для данного элемента доступны только глобальные атрибуты.
Примеры
Одиночные термин и определение
<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>
Подсказка: Может быть полезно задать разделитель для пары ключ-значение при помощи CSS3, например:
dt:after {
content: ": ";
}
Оборачивание групп имя-значение в <div> элементы
WHATWG HTML разрешает оборачивать каждую группу имя-значение в элементе <dl> в элемент <div>. Это может быть полезно, когда используются микроданные (en-US) или когда глобальные атрибуты применяются к целой группе, или для стилевых целей.
<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> по-разному. Некоторые скринридеры, такие как VoiceOver на iOS, не будут озвучивать, что содержимое <dl> это список. В связи с этим, убедитесь, что содержимое каждого элемента списка написано таким образом, что оно сообщает о своём отношении с другими элементами списка в списке группы.
Спецификации
| Specification |
|---|
| HTML Standard # the-dl-element |
Совместимость с браузерами
BCD tables only load in the browser