<dl> элемент списка описаний HTML

Элемент HTML <dl> представляет список описаний. Элемент содержит список групп терминов (заданных с помощью элемента <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;
}

Атрибуты

Этот элемент также поддерживает глобальные атрибуты.

compact

Этот логический атрибут указывает, что список следует отображать в компактном виде. Интерпретация этого атрибута зависит от браузера. Вместо него используйте CSS: чтобы добиться эффекта, аналогичного атрибуту compact, можно задать свойству CSS line-height значение 80%.

Специальные возможности

Каждая программа экранного доступа по-разному представляет содержимое <dl>, включая общее количество элементов, связь между терминами и определениями и способы навигации. Эти различия не обязательно являются ошибками. Начиная с iOS 14, VoiceOver сообщает, что содержимое <dl> является списком при навигации с помощью виртуального курсора (но не при использовании команды чтения всего содержимого). VoiceOver не поддерживает команды навигации по спискам для <dl>. Будьте осторожны при назначении ролей ARIA term и definition конструкциям <dl>, так как VoiceOver (macOS и iOS) изменит способ их озвучивания.

• VoiceOver в iOS 14 поддерживает списки описаний
• Краткое примечание о поддержке списков описаний

Примеры

Один термин и описание

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

Результат

Совет: бывает удобно задать разделитель между ключом и значением в CSS, например:

dt::after {
  content: ": ";
}

Оборачивание групп «имя — значение» в элементы div

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>) только для создания отступов на странице. Хотя это работает, такая практика не рекомендуется и скрывает смысл списков описаний.

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

Техническая сводка

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

Совместимость с браузерами

См. также

• <dt>
• <dd>