Тег dd (от английского description details, «детали описания») записывает описание, значение или определение для названия dt. Это парный тег, а закрывающий </dd> можно опустить, если сразу за описанием идёт другой dd или dt либо заканчивается родитель. Браузер выводит описание с новой строки со сдвигом вправо на 40px, шрифт у него обычный.
Весь список разобран на странице про тег dl, название на странице про тег dt, а урок Описание dd: когда использовать список определений вместо обычного списка объясняет, когда вместо обычного списка нужны пары. Здесь только то, что относится к dd: что допустимо внутри, как он закрывается, как задать расстояния и нумерацию и как выбрать нужные описания в CSS.
<dl>
<dt>Цвет</dt>
<dd>Зелёный</dd>
</dl>В этой статье
- Тег dd в HTML: что это и как браузер выводит описание
- Где записать тег dd: после dt, в dl или в div группы
- Несколько тегов dd подряд: значения одного термина
- Что допустимо внутри тега dd: p, ul, table, form, details
- Заголовки и секции внутри тега dd: отличие от dt
- Абзацы p внутри тега dd: лишние отступы и как их убрать
- Вложенный dl внутри тега dd: накопление отступов
- Закрывающий тег dd: что закрывается само, а что поглощает dt
- Расстояние между группами: margin у тега dd и схлопывание
- Выбор тега dd в CSS: dt + dd, first-of-type и группы
- Маркеры и нумерация тегов dd: list-item и counter
- Длинное содержимое в теге dd: слово, pre, таблица, картинка
- Тег dd в JavaScript: словарь «термин и значения» из dl
- Атрибуты тега dd: только глобальные
- Вопросы про тег dd: details без JavaScript и подсветка группы
- Частые ошибки с тегом dd
Тег dd в HTML: что это и как браузер выводит описание
Тег dd блочный: display: block, вертикальные отступы нулевые, слева задан отступ margin-inline-start: 40px. Жирности у описания нет, вид задают в CSS. Пустой dd проходит проверку и занимает 0px высоты, а dd с атрибутом hidden скрывается целиком: display: none.
dd {
display: block;
margin-inline-start: 40px;
}Пример: описание в dd, пустой dd и dd с hidden
Выберите запись: под результатом показано, как браузер вывел dd.
Где записать тег dd: после dt, в dl или в div группы
Родитель у dd один из двух: dl или div, который сам находится прямо в dl и вмещает одну группу. Порядок тоже важен: группа начинается с dt, поэтому dd первым и dd без dt валидатор считает ошибкой. Запись dd в div вне dl, в li или в другом dd тоже неверна: для вложенных описаний внутри dd записывают отдельный dl.
<dl>
<div>
<dt>Цвет</dt>
<dd>Зелёный</dd>
</div>
</dl>Пример: где допустим dd
Выберите запись: вверху её код, под результатом написано, допустима ли она.
Несколько тегов dd подряд: значения одного термина
Несколько dd подряд записывают, когда у одного названия несколько значений: языки, телефоны, цвета. Каждое значение получает свой dd, а не общий абзац с <br>: так значения можно выбрать, оформить и пересчитать по отдельности. По умолчанию каждый dd выводится на своей строке. Чтобы собрать их в одну, делают display: inline, обнуляют margin (у inline-описания остаётся отступ слева 40px) и добавляют запятую через dd + dd::before. Обратный случай, когда одно описание у нескольких названий, разобран в разделе про синонимы в теге dt.
<dl>
<dt>Языки</dt>
<dd>HTML</dd>
<dd>CSS</dd>
<dd>JavaScript</dd>
</dl>dd {
display: inline;
margin: 0;
}
dd + dd::before {
content: ', ';
}Пример: три значения одного названия
Выберите вариант: вверху правила, под результатом написано, на скольких строках три dd.
Что допустимо внутри тега dd: p, ul, table, form, details
Внутри dd допустим любой поток: абзацы p, списки, таблицы table, формы, картинки, figure, цитаты blockquote, блоки pre, details и hr. Не подходят main, dt, другой dd и теги, которым нужен свой родитель, например li или td. Поэтому dd подходит для длинных ответов, примеров и даже форм, а не только для одной строки текста.
<dd>
<p>Первый абзац</p>
<ul>
<li>красный</li>
<li>зелёный</li>
</ul>
</dd>Пример: что допустимо внутри dd
Выберите запись: вверху код, под результатом написано, допустима ли она. Картинка в примере нарисована квадратом.
Заголовки и секции внутри тега dd: отличие от dt
В dt заголовки и секции запрещены, а в dd допустимы: h1-h6, section, article, header, footer, nav, aside и address. Не проходит только main. Заголовок внутри dd получает свои стили: h3 при шрифте 16px имеет размер 18.72px и такие же отступы сверху и снизу. Такая запись оправдана, когда описание само как раздел с подзаголовками. Для обычного значения достаточно текста или p.
<dd>
<h3>Состав</h3>
<p>Вода, соль, сахар</p>
</dd>Пример: заголовки и секции в dd
Выберите запись: вверху код, под результатом написано, допустима ли она, и размер заголовка, который вывел браузер.
Абзацы p внутри тега dd: лишние отступы и как их убрать
У абзаца p внешний отступ 1em (16px при шрифте 16px), а у dd вертикальных отступов нет, поэтому отступ абзаца проходит наружу. Между названием и описанием появляется зазор 16px, которого без p нет, а такой же зазор остаётся снизу перед следующим dt. Лишнее убирают у первого и последнего абзаца: dd p:first-child и dd p:last-child. Между самими абзацами отступ остаётся.
dd p:first-child {
margin-top: 0;
}
dd p:last-child {
margin-bottom: 0;
}Пример: зазор от абзаца внутри dd
Выберите правило: вверху код, под результатом расстояние от названия до первого абзаца и от последнего абзаца до следующего названия.
Вложенный dl внутри тега dd: накопление отступов
Вложенный список определений записывают внутри dd, а не рядом с ним. Каждый уровень сдвигает описание ещё на 40px: на втором уровне отступ 80px, на третьем 120px, и на узком экране для текста остаётся мало места. Отступ уменьшают одним правилом: dd dd меняет только вложенные описания, а dd без уточнения меняет все уровни, включая первый.
<dl>
<dt>Фронтенд</dt>
<dd>
<dl>
<dt>React</dt>
<dd>Библиотека интерфейсов</dd>
</dl>
</dd>
</dl>dd dd {
margin-inline-start: 16px;
}Пример: три уровня вложенных dl
Выберите правило: вверху код, под результатом отступ слева у dd на каждом уровне.
Закрывающий тег dd: что закрывается само, а что поглощает dt
Закрывающий </dd> можно не писать, если сразу за описанием идёт dd или dt либо кончается родитель. Но следующий dt закрывает dd только тогда, когда внутри не осталось открытых тегов, кроме p и div: они закрываются сами. Всё остальное остаётся открытым и поглощает следующий dt вместе с его dd: ul с li, form, blockquote, details, pre, figure, заголовки, секции, таблица и вложенный dl. Поэтому после такого содержимого закрывающие теги пишут явно.
<dl>
<dt>A
<dd><ul><li>Пункт
<dt>B
<dd>D
</dl>Пример: какое дерево построил браузер
Выберите запись: вверху код, под результатом дерево, которое построил браузер, и число названий dt прямо в dl.
Расстояние между группами: margin у тега dd и схлопывание
У dd и dt вертикальных отступов нет, поэтому расстояния между группами задают сами, а правила для отступов по умолчанию описаны в разделе про тег dl. Вертикальные margin соседних dd схлопываются: margin-bottom: 20px и margin-top: 30px дают 30px, а не 50px. Если зазор нужен только между группами, а не между значениями одной группы, его задают последнему dd группы: dd:has(+ dt). Для списка с div-обёртками проще задать margin-bottom самому div.
dd:has(+ dt) {
margin-bottom: 12px;
}Пример: расстояние между dd и между группами
Выберите правило: вверху код, под результатом расстояние между dd одной группы и между группами.
Выбор тега dd в CSS: dt + dd, first-of-type и группы
Чтобы выбрать первое описание каждой группы, подходит dt + dd. А вот dd:first-of-type и dd:last-of-type считают соседей в одном родителе, и без div-обёрток родитель у всех групп общий: выбирается один dd на весь dl. Последний dd группы выбирают так: dd:has(+ dt) и dd:last-child для последней группы. Если каждая группа в своём div, работают и dd:last-child, и dd:last-of-type.
dt + dd {
font-weight: 600;
}
dd:has(+ dt),
dd:last-child {
margin-bottom: 12px;
}Пример: выбор одного dd в каждой группе
Выберите селектор: вверху код, под результатом сколько dd выбрано и в скольких из трёх групп выбран ровно один.
Маркеры и нумерация тегов dd: list-item и counter
Маркеры у описаний появляются, если задать display: list-item и list-style. Но нумерация decimal идёт через весь dl и не начинается заново с новой группы: получаются номера 1, 2, 3, 4. Чтобы каждая группа считала с единицы, используют свой счётчик: counter-reset на dt и counter-increment на dd, а номер выводят в dd::before.
dt {
counter-reset: v;
}
dd {
counter-increment: v;
}
dd::before {
content: counter(v) ') ';
}Пример: маркеры и нумерация описаний
Выберите вариант: вверху код, под результатом номера описаний по порядку.
Длинное содержимое в теге dd: слово, pre, таблица, картинка
Длинное слово, блок pre, таблица и картинка шире экрана выходят за край dd и дают горизонтальную прокрутку страницы. Для слова подходит overflow-wrap: anywhere, для кода overflow-x: auto у pre, для таблицы обёртка с overflow-x: auto, для картинки max-width: 100%. Прокрутка остаётся только внутри блока.
dd {
overflow-wrap: anywhere;
}
dd pre {
overflow-x: auto;
}
dd img {
max-width: 100%;
height: auto;
}Пример: длинное содержимое dd и прокрутка страницы
Выберите вариант: вверху правило, под результатом написано, появилась ли горизонтальная прокрутка у страницы.
Тег dd в JavaScript: словарь «термин и значения» из dl
Название и описания в dl стоят рядом как братья, а не вложены друг в друга. Поэтому словарь «название и значения» собирают одним проходом по dl.children: dt создаёт ключ с пустым массивом, а каждый следующий dd добавляет значение в этот массив. Если группы обёрнуты в div, вместо children берут dl.querySelectorAll('dt, dd'), но тогда вложенный dl тоже попадёт в выборку.
const data = {};
let key;
for (const el of dl.children) {
if (el.tagName === 'DT') {
key = el.textContent;
data[key] = [];
} else {
data[key].push(el.textContent);
}
}Пример: словарь из названий и описаний dl
Нажмите кнопку: под результатом словарь, который собрал скрипт из текущего списка.
Атрибуты тега dd: только глобальные
У dd нет собственных атрибутов, работают только глобальные.
| Атрибут | Статус | Что делает | Пример записи |
|---|---|---|---|
id, class, title, lang, tabindex, hidden, data-* | актуален | Глобальные атрибуты: hidden скрывает описание, lang задаёт язык значения, id даёт якорь | <dd lang="en"> |
itemprop | с условием | Работает только внутри элемента с itemscope, иначе валидатор считает это ошибкой | <dd itemprop="description"> |
role="definition" | лишний | У dd такая роль задана самим тегом, валидатор выдаёт предупреждение | <dd role="definition"> |
role="listitem" | недопустим | Валидатор считает эту роль ошибкой для dd, а ещё требует список-родитель | <dd role="listitem"> |
align, nowrap | недопустим | Для dd такие атрибуты не определены, выравнивание и перенос задают в CSS | <dd nowrap> |
Вопросы про тег dd: details без JavaScript и подсветка группы
Два вопроса, которых нет в разделах выше: как сделать раскрывающееся описание без скриптов и как подсветить всё описание группы при наведении на название.
Как сделать раскрывающееся описание без JavaScript?
Внутрь dd записывают details с summary. Название dt остаётся на виду, а текст описания раскрывается по клику, при этом скрипт и атрибут aria-expanded не нужны: браузер сам считает состояние. Такой вариант проще кнопки внутри dt, но кликать нужно по summary, а не по названию.
<dt>Доставка</dt>
<dd>
<details>
<summary>Сроки</summary>
От 1 до 3 дней.
</details>
</dd>Пример: описание в details внутри dd
Нажмите на заголовок описания или на кнопку: под результатом число раскрытых блоков.
Как подсветить описание группы при наведении на название?
Правило dt:hover ~ dd подсвечивает все описания после названия, включая чужие группы. Правило dt:hover + dd подсвечивает только первый dd, а остальные значения группы остаются без фона. Подсветка всей группы получается, когда она обёрнута в div: dl > div:hover > dd. Подсвечивается при наведении на любую часть группы, а не только на название. Запись div:hover dd без dl > опасна: она сработает и при наведении на любой внешний div, в который вложен список.
dl > div:hover > dd {
background: #fff1ea;
}Пример: подсветка группы при наведении
Выберите правило и наведите курсор на название A: под результатом сколько dd подсветилось и сколько их у этой группы.
Частые ошибки с тегом dd
Типичные ошибки с тегом dd и как их исправить.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
dd первым или без dt | Ошибка валидатора: группа начинается с dt | Записать dt перед описанием |
dd в div, li или section вне dl | Ошибка валидатора, браузер не считает это списком определений | Записать dd в dl или в div внутри dl |
dd внутри dd | Браузер закрывает первый dd, валидатор выдаёт ошибку | Для вложенных описаний записать отдельный dl |
main или dt внутри dd | Ошибка валидатора | Убрать main, для вложенных названий записать dl |
Значения одного названия через br в одном dd | Значения слиты, их нельзя выбрать по отдельности | Записать каждое значение в свой dd |
Незакрытые ul, form, blockquote, details, table или вложенный dl в dd | Следующий dt оказывается внутри dd | Закрыть вложенные теги явно |
p в dd без правки отступов | Между названием и описанием зазор 16px | Обнулить margin у dd p:first-child и dd p:last-child |
dd:first-of-type для первого описания группы | Выбран один dd на весь dl | Использовать dt + dd |
dd:last-of-type для последнего описания группы | Выбран один dd на весь dl | Использовать dd:has(+ dt) или обёртки div |
list-style: decimal у dd для нумерации | Номера идут через все группы | Свой счётчик со сбросом на dt |
display: inline у dd без margin: 0 | Остаётся отступ слева 40px | Добавить margin: 0 |
Длинное слово, pre или таблица в dd | Страница получает горизонтальную прокрутку | Задать overflow-wrap или overflow-x: auto |
dt:hover ~ dd для подсветки группы | Подсвечены описания всех следующих групп | Обернуть группу в div и взять dl > div:hover > dd |
role="definition", nowrap или align у dd | Предупреждение или ошибка валидатора | Убрать атрибуты, остальное задать в CSS |
