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

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨июль 2015 г.⁩.

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

Категории контента	Потоковый контент, и если потомки элемента`<dl>` включают одну группу имя-значение явный контент.
Допустимое содержимое	Либо: Ноль или более групп каждая из которых состоит из одного или более элементов`<dt>` за которым следует один или более элементов`<dd>`, необязательно смешанных с элементами`<script>` и`<template>`. Либо: Один или более элементов`<div>`, необязательно смешанных с элементами`<script>` и`<template>`.
Пропуск тегов	Нет, открывающий и закрывающий теги обязательны.
Допустимые родители	Любой элемент который принимаетпотоковый контент.
Допустимые ARIA-роли	`group`,`presentation`
DOM-интерфейс	`HTMLDListElement`

Атрибуты

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

Примеры

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

html

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

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

html

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

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

html

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

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

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

Метаданные

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

html

<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, например:

css

dt:after {  content: ": ";}

Оборачивание групп имя-значение в `<div>` элементы

WHATWG HTML разрешает оборачивать каждую группу имя-значение в элементе<dl> в элемент<div>. Это может быть полезно, когда используютсямикроданные или когдаглобальные атрибуты применяются к целой группе, или для стилевых целей.

html

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

Доступность

Каждый скринридер произносит содержимое элемента<dl> по-разному. Некоторые скринридеры, такие как VoiceOver на iOS, не будут озвучивать, что содержимое<dl> это список. В связи с этим, убедитесь, что содержимое каждого элемента списка написано таким образом, что оно сообщает о своём отношении с другими элементами списка в списке группы.