<dl>

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

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

Атрибуты

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

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>

Результат:

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

<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>

Результат:

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

<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>

Результат:

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

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

Метаданные

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

<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.

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

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

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

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