<dl>: Элемент списка описаний

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

Этот элемент включает только глобальные атрибуты.

Каждый экранный диктор отображает <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: ": ";
}

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.

• <dt>
• <dd>