<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.
Please take two minutes to fill out our short survey.
HTML-элемент <dl> (от англ. Description List) представляет собой список описаний. Этот элемент служит контейнером для списка пар терминов (определяемых элементом <dt>) и их описаний (определяемых элементами <dd>). Этот элемент обычно используют при создании глоссария или для отображения метаданных (списка пар ключ-значение).
Интерактивный пример
<p>Cryptids of Cornwall:</p>
<dl>
<dt>Beast of Bodmin</dt>
<dd>A large feline inhabiting Bodmin Moor.</dd>
<dt>Morgawr</dt>
<dd>A sea serpent.</dd>
<dt>Owlman</dt>
<dd>A giant owl-like creature.</dd>
</dl>
p,
dt {
font-weight: bold;
}
dl,
dd {
font-size: 0.9rem;
}
dd {
margin-bottom: 1em;
}
| Категории контента | Потоковый контент, и если потомки элемента <dl> включают одну группу имя-значение явный контент. |
|---|---|
| Допустимое содержимое | Либо: Ноль или более групп каждая из которых состоит из одного или более элементов <dt> за которым следует один или более элементов <dd>, необязательно смешанных с элементами <script> и <template>. Либо: Один или более элементов <div>, необязательно смешанных с элементами <script> и <template>. |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент который принимает потоковый контент. |
| Допустимые ARIA-роли | group, 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>
Подсказка: Может быть полезно задать разделитель для пары ключ-значение при помощи CSS3, например:
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> по-разному. Некоторые скринридеры, такие как VoiceOver на iOS, не будут озвучивать, что содержимое <dl> это список. В связи с этим, убедитесь, что содержимое каждого элемента списка написано таким образом, что оно сообщает о своём отношении с другими элементами списка в списке группы.
Спецификации
| Specification |
|---|
| HTML # the-dl-element |