<dl> - третий тип списка в HTML, но устроен он иначе, чем <ul> и <ol> из прошлого урока: это не перечень равнозначных пунктов, а список пар "термин - описание". Внутри него термин помечается тегом <dt>, а его описание или значение - тегом <dd>. Годится для глоссария, характеристик товара или любых данных вида "ключ - значение".
В этом уроке
Обрати внимание: у CSS два термина <dt> подряд (полное и сокращённое название) и одно общее определение - это валидная структура. И ещё: браузер сам делает отступ слева у каждого <dd>, без единой строчки CSS - попробуй добавить свою пару термин/определение и посмотри на результат.
Как устроен список определений: dl, dt и dd
Внутри <dl> идут теги <dt> и <dd>, и оба обязательно нужно закрывать - в отличие от пустых тегов вроде <br> или <hr>, у них есть содержимое. Модель содержимого гибче, чем кажется на первый взгляд: перед одним <dd> может стоять несколько <dt> подряд (несколько синонимов с общим определением), и наоборот - после одного <dt> может идти несколько <dd> (несколько значений одного термина). Современная спецификация также разрешает оборачивать пары в <div> - это удобно для стилизации или микроразметки, но не обязательно для простого списка.
<dt>CSS</dt><dt>Каскадные таблицы стилей</dt><dd>Язык оформления страниц.</dd> - два термина, одно общее определение.
<dl><dd>Язык оформления страниц.</dd></dl> - определение без термина: по модели содержимого dd должен идти после dt, а не начинать список сам по себе.
Когда использовать dl вместо обычного списка
<dl> уместен там, где у каждого пункта есть пара "термин и его значение", а не просто перечень равнозначных вещей: глоссарий терминов, характеристики товара, поля профиля пользователя. Частая ошибка - подменять dl/dt/dd обычными <div> или <ul>/<li> с жирным текстом и отступами, расставленными вручную: визуально может выглядеть похоже, но теряется сама связь "термин - его значение", которую понимают поисковики и вспомогательные технологии. При этом добавлять к dl лишние ARIA-роли term/definition "для надёжности" не нужно - современные скринридеры и так корректно работают со стандартной разметкой, а лишние роли иногда даже меняют то, как список объявляется.
<dl><dt>Материал</dt><dd>Хлопок 100%</dd><dt>Размер</dt><dd>M</dd></dl> - характеристики товара как настоящие пары термин-значение.
<div><b>Материал:</b> Хлопок 100%</div><div><b>Размер:</b> M</div></div> - выглядит похоже, но для браузера это просто текст без связи между термином и значением.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Использовать <dl> просто ради отступа у текста, без настоящей пары термин-описание | Поисковики и вспомогательные технологии не находят пары, о которых заявляет разметка - смысла в ней не больше, чем в div | Использовать <dl> только там, где действительно есть термин и его значение |
| Начинать список сразу с <dd>, без предшествующего <dt> | Нарушает модель содержимого: определение без термина, к которому оно относится | Всегда предварять каждую группу <dd> хотя бы одним <dt> |
| Подменять dl/dt/dd обычными <div>/<ul>/<li> с ручным жирным текстом и отступами | Внешне похоже, но теряется семантическая связь между термином и значением | Использовать настоящие dl/dt/dd там, где данные - это пары термин-значение |
| Добавлять ARIA role="term"/"definition" к dl "на всякий случай" | Может изменить и даже ухудшить то, как VoiceOver и другие скринридеры объявляют список | Не добавлять лишние ARIA-роли - стандартной разметки dl/dt/dd достаточно |
Шпаргалка
| Тег или задача | Что использовать |
|---|---|
| <dl> | Обёртка списка определений - список пар термин-описание |
| <dt> | Термин - можно несколько подряд перед одним <dd> |
| <dd> | Описание или значение - можно несколько подряд после одного <dt> |
| Глоссарий, словарь терминов | dl / dt / dd |
| Характеристики товара, поля профиля (ключ-значение) | dl / dt / dd |
| Просто перечень равнозначных пунктов | ul (маркированный) или ol (нумерованный), не dl |
Коротко: отвечаем на вопросы
Чем dl отличается от ul и когда его выбрать?
ul и ol - это перечень равнозначных пунктов, а dl - список пар "термин и его значение": глоссарий, характеристики товара, поля профиля. Если у каждого пункта есть чёткая пара "что это" и "чему это равно" - подходит dl, если просто нужно перечислить пункты - ul или ol.
Можно ли поставить несколько dt или несколько dd подряд?
Да, оба варианта допустимы. Несколько dt подряд перед одним dd удобны для синонимов одного термина с общим определением, а несколько dd после одного dt - когда у термина есть несколько разных значений или пояснений.
Зачем оборачивать пары dt/dd в div?
Современная спецификация разрешает группировать каждую пару термин-описание в свой div - это удобно, когда нужно стилизовать группы через CSS или разметить их микроданными по отдельности. Для простого списка это не обязательно - dt и dd можно оставлять прямыми потомками dl.
Нужно ли добавлять к dl какие-то ARIA-атрибуты для доступности?
Как правило нет. Современные скринридеры корректно работают со стандартной разметкой dl/dt/dd без дополнительных ролей, а искусственное добавление ролей term/definition иногда меняет то, как список объявляется, - и не всегда в лучшую сторону.
