skip to main content

<dl>, <dd>, <dt>

html

Кратко 🔗

Теги <dl>, <dt> и <dd> используются при вёрстке списка определений. Если у нас есть перечень терминов и определений к ним, то для вёрстки используем эти теги.

Пример 🔗

<p>Животные героев «Гарри Поттера»</p>
<dl>
<dt>Букля</dt>
<dd>полярная сова Гарри Поттера</dd>
<dt>Живоглот</dt>
<dt>полукот Гермионы Грейнджер</dd>
<dt>Пушистик</dt>
<dd>кролик Лаванды Браун</dd>
<dt>Нагайна</dt>
<dd>змея Волан-де-Морта</dd>
</dl>

Как это понять 🔗

Иногда требуется сверстать не просто перечень элементов, а список терминов и их определений, либо просто список пар «ключ-значение». Семантически верно будет такие перечни верстать при помощи тегов <dl>, <dt>, <dd>.

Элемент <dl> аналогично элементам <ul> и <ol> является внешней оберткой для элементов списка.

Элемент <dt> используется для вёрстки термина либо ключа в паре «ключ-значение». Как правило, следом за ним идёт либо ещё один тег <dt> (если есть необходимость сверстать несколько терминов с одним определением), либо тег <dd>.

Тегом <dd> верстается определение термина, либо значение в паре «ключ-значение». Следом за этим тегом может идти как ещё один тег <dd> (если у термина несколько определений), так и тег <dt> (следующий термин).

Примеры написания 🔗

Классический вариант. Один термин — одно определение:

<dl>
<dt>Blink</dt>
<dd>движок в браузерах Chrome, Edge, Opera</dd>
<dt>Gecko</dt>
<dd>движок в браузере Firefox</dd>
<dt>WebKit</dt>
<dd>движок в браузере Apple Safari</dd>
</dl>

Несколько терминов с общим определением:

<dl>
<dt>Firefox</dt>
<dt>Mozilla Firefox</dt>
<dt>FF</dt>
<dd>
свободный браузер на движке Gecko,
разработкой и распространением которого
занимается Mozilla Corporation
</dd>
</dl>

Термин с несколькими определениями:

<dl>
<dt>Chrome</dt>
<dd>Браузер, разрабатываемый компанией Google, вышел в 2008 году.</dd>
<dd>Элемент 6-й группы 4-го периода периодической системы.</dd>
</dl>

Отображение метаданных (пар «ключ-значение»):

<dl>
<dt>Имя</dt>
<dd>Гарри Джеймс Поттер</dd>
<dt>День рождения</dt>
<dd>31 июля 1980 года</dd>
<dt>Телосложение</dt>
<dd>худощавый, невысокого роста</dd>
<dt>Особые приметы</dt>
<dd>носит круглые очки; шрам в виде молнии на лбу.</dd>
</dl>

Подсказки 🔗

💡 При вёрстке перечня метаданных (пар «ключ-значение») удобно разделитель вносить в псевдоэлемент, а не писать текстом рядом с каждым ключом:

dt::after {
content: ': ';
}

💡 В отличие от списков <ul> и <ol> группы терминов и определений, с недавних пор и по просьбе разработчиков, можно оборачивать в <div>.

See the Pen dl,dd,dt by doka (@y-doka) on CodePen.

Автор: Денис,