HTML тег dl - Учебник HTML

HTML-тег <dl> определяет список описаний (ранее называвшийся списком определений). Он группирует термины и их описания в виде пар «имя — значение». Элемент <dl> является контейнером; внутри него тег <dt> задаёт термин (имя), а тег <dd> — описание этого термина (значение).

На этой странице рассматривается, когда стоит использовать <dl> вместо ненумерованного или нумерованного списка, как группировать элементы для стилизации и микроданных, как разметка работает с точки зрения доступности, а также приведены интерактивные примеры для распространённых сценариев.

Когда использовать `<dl>`

Используйте список описаний, когда содержимое представляет собой набор пар «имя — значение», а не плоскую последовательность элементов. Выбирайте <dl> для:

Глоссариев и словарей — термин с его определением.
FAQ — каждый вопрос является <dt>, каждый ответ — <dd>.
Метаданных — пары ключ–значение, например Author, Published, Status.
Диалогов и сценариев — имя говорящего является термином, а произносимая реплика — описанием.
Характеристик товаров — Weight, Dimensions, Material, каждый с указанием значения.

Используйте <ul>, когда элементы не имеют определённого порядка и связанного значения, и <ol>, когда важны порядок или нумерация. Отличительная черта <dl> — сопоставление имени с одним или несколькими значениями.

Не используйте <dl> просто для создания отступа текста. Этот элемент несёт семантический смысл, и применение его в целях визуального оформления скрывает этот смысл. Для визуального отступа используйте CSS-свойство margin или padding.

Синтаксис

Тег <dl> является парным. Термины и описания записываются между открывающим (<dl>) и закрывающим (</dl>) тегами.

Пример HTML-тега `<dl>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <dl>
      <dt>Hypertext</dt>
      <dd>A system of text pages that have cross-references.</dd>
      <dt>Hyperlink</dt>
      <dd>A part of a hypertext document that references another item.</dd>
    </dl>
  </body>
</html>

Попробуйте сами »

Несколько терминов и описаний

Один <dt> может иметь несколько описаний <dd>, а несколько терминов <dt> могут разделять одно описание <dd>. Это позволяет моделировать синонимы, альтернативы и сгруппированные определения.

<dl>
  <!-- One term, multiple descriptions -->
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform web browser.</dd>
  <dd>Developed and maintained by the Mozilla Foundation.</dd>

  <!-- Multiple terms sharing one description -->
  <dt>JS</dt>
  <dt>JavaScript</dt>
  <dt>ECMAScript</dt>
  <dd>The programming language of the web.</dd>
</dl>

Группировка пар с помощью `<div>`

HTML5 позволяет оборачивать каждую группу «имя — значение» в <div>, размещённый непосредственно внутри <dl>. Это допустимая разметка, которая удобна, когда нужно:

применить CSS к целой паре сразу (например, с помощью Flexbox или CSS Grid),
прикрепить микроданные или глобальные атрибуты, такие как class или data-*, к отдельной группе.

<div> — единственный элемент, помимо <dt> и <dd>, допустимый в качестве прямого дочернего элемента <dl>.

<dl>
  <div class="row">
    <dt>Name</dt>
    <dd>Ada Lovelace</dd>
  </div>
  <div class="row">
    <dt>Field</dt>
    <dd>Mathematics</dd>
  </div>
  <div class="row">
    <dt>Known for</dt>
    <dd>The first published algorithm for a computer.</dd>
  </div>
</dl>

.row {
  display: flex;
  gap: 1rem;
}
.row dt {
  width: 8rem;
  font-weight: bold;
}

Доступность

Список описаний — доступный способ передать отношения «ключ — значение», но только при семантически правильном использовании разметки.

Элементы <dt> имеют неявную роль term, а элементы <dd> — неявную роль definition, поэтому вспомогательные технологии понимают, какой элемент является именем, а какой — значением.
Программы чтения с экрана обычно объявляют количество элементов, например «список описаний, 3 термина», а затем последовательно читают каждый термин и его описание. Связь между элементами должна быть очевидна из самого текста, поэтому пишите каждый <dd> так, чтобы его отношение к предшествующему <dt> было понятно вне контекста.
Необязательная группировка с помощью <div> не нарушает это. Роли term и definition по-прежнему применяются, поскольку элементы <dt> и <dd> остаются допустимыми потомками <dl>.

Атрибуты

Тег <dl> поддерживает глобальные атрибуты и атрибуты событий.

Как стилизовать HTML-тег `<dl>`

По умолчанию браузеры добавляют отступ для каждого <dd> и располагают термины и описания вертикально. Сбросить и переопределить стили можно с помощью CSS:

dl {
  margin: 0;
  padding: 0;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 20px;
}

Практика

Какие утверждения о HTML-теге dl верны?

Тег dl создаёт список описаний из пар «термин — значение».Тег dl используется для создания выпадающего списка в HTML.Тег dt задаёт термин, а тег dd — его описание внутри dl.Тег dl нельзя комбинировать с другими тегами.Элемент div может группировать пару dt и dd как прямой дочерний элемент dl в допустимом HTML5.Один dt может иметь только один dd.

Когда использовать <dl>