MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

До спецификации HTML5, <dl> был известен как «Список определений».

Content categories Flow content, and if the <dl> element's children include one name-value pair, palpable content.
Permitted content Zero or more <dt> elements, each followed by one or more <dd> elements.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parent elements Any element that accepts flow content.
DOM interface HTMLDListElement

Атрибуты

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

compact
Заставляет определение отображаться на той же строке, что и термин. В настоящее время этот атрибут не поддерживается.

Примеры

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

<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 definitions -->
</dl>

Результат:

Image:HTML-dl1.png

Множественные термины с одним определением

<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 definitions -->
</dl>

Результат:

Image:HTML-dl2.png

Одиночный термин со множественными определениями

<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 definitions -->
</dl>

Результат:

Image:HTML-dl3.png

Множественные термины и определения

Кроме того, можно определить несколько терминов с несколькими соответствующими определениями, путем комбинирования приведенных выше примеров.

Метаданные

Список определений очень полезен для отображения метаданных? как список пар ключ-значение.

<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: ": ";
}

Примечание

Не используйте данный элемент (как и элемент <ul>) просто для создания отступов на странице. Не смотря на то, что это работает, — это является плохой практикой и подменяет семантическое значение списка определений.

Чтобы изменить отступ определений терминов, воспользуйтесь CSS-свойством margin.

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

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

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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (Да) (Да) (Да) (Да)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Да) (Да) (Да) (Да) (Да)

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

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

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

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