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

Категории контента Потоковый контент, и если потомки элемента <dl> включают одну группу имя-значение явный контент.
Разрешённое содержимое Либо: Ноль или более групп каждая из которых состоит из одного или более элементов <dt> за которым следует один или более элементов <dd>, необязательно смешанных с элементами <script> и <template>.
Либо: Один или более элементов <div>, необязательно смешанных с элементами <script> и <template>.
Пропуск тегов None, both the starting and ending tag are mandatory.
Разрешённые родители Любой элемент который принимает потоковый контент.
Разрешённые 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> это список. В связи с этим, убедитель что содержимое каждого элемента списка написано таким образом, что оно сообщает о своём отношенении с другими элементами списка в списке группы.

Спецификации

Спецификация Статус Комментарий
HTML Living Standard
Определение '<dl>' в этой спецификации.
Живой стандарт
HTML5
Определение '<dl>' в этой спецификации.
Рекомендация
HTML 4.01 Specification
Определение '<dl>' в этой спецификации.
Рекомендация Начальное определение

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
dlChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка

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

  • Элемент <dt>
  • Элемент <dd>

Метки документа и участники

Внесли вклад в эту страницу: fuggy, Grawl, mdnwebdocs-bot, ahtohbi4
Обновлялась последний раз: fuggy,