HTML-элемент <dl>
(от англ. Description List) представляет собой список описаний. Этот элемент служит контейнером для списка пар терминов (определяемых элементом <dt>
) и их описаний (определяемых элементами <dd>
). Этот элемент обычно используют при создании глоссария или для отображения метаданных (списка пар ключ-значение).
Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с https://github.com/mdn/interactive-examples и отправьте нам pull request.
Категории контента | Потоковый контент, и если потомки элемента <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>
Примечание
Не используйте данный элемент (как и элемент <ul>
) просто для создания отступов на странице. Не смотря на то, что это работает, — это является плохой практикой и подменяет семантическое значение списка определений.
Чтобы изменить отступ определений терминов, воспользуйтесь CSS-свойством margin
.
Проблемы доступности
Каждый скринридер произносит содержимое элемента <dl>
по-разному. Некоторые скринридеры, такие как VoiceOver на iOS, не будут озвучивать, что содержимое <dl>
это список. В связи с этим, убедитеcь, что содержимое каждого элемента списка написано таким образом, что оно сообщает о своём отношенении с другими элементами списка в списке группы.
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
HTML Living Standard Определение '<dl>' в этой спецификации. |
Живой стандарт | |
HTML5 Определение '<dl>' в этой спецификации. |
Рекомендация | |
HTML 4.01 Specification Определение '<dl>' в этой спецификации. |
Рекомендация | Начальное определение |
Поддержка браузерами
Компьютеры | Мобильные | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
dl | Chrome Полная поддержка Да | Edge Полная поддержка Да | Firefox Полная поддержка 1 | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
Легенда
- Полная поддержка
- Полная поддержка