Вебсправочник
Справочник HTML

Тег <dd>: значение или пояснение названия

Dd содержит описание, определение или значение для предшествующей группы названий dt. Внутри допускается более сложное содержимое, если оно помогает раскрыть именно это название.

Назначение

Dd содержит описание, определение или значение для предшествующей группы названий dt. Внутри допускается более сложное содержимое, если оно помогает раскрыть именно это название.

Как это работает

Для нескольких пояснений можно разместить несколько dd подряд. В примере второе описание содержит список проверок. Стандартный отступ браузера можно изменить CSS, не меняя семантику.

Пример

<dl><dt>Готовность учебной страницы</dt><dd>Страница открывается без ошибок путей.</dd><dd><ul><li>Проверены изображения.</li><li>Работают внутренние ссылки.</li></ul></dd></dl>

Что должно получиться

Оба описания относятся к одной готовности страницы, а вложенный список остаётся частью второго пояснения. Не требуется создавать вымышленный новый термин перед каждым пунктом.

Граница применения и частая ошибка

Не ставьте dd отдельно от dl как удобный блок с отступом. Для сетки «ключ — значение» сначала обеспечьте правильную структуру, затем применяйте CSS. Порядок элементов важнее сходства с таблицей на одном скриншоте.

Самостоятельная проверка

Добавьте второе название с собственным описанием и проверьте границы групп. Уберите стили и прочитайте текст линейно. Если значения лучше сравнивать сразу по нескольким колонкам, рассмотрите настоящую таблицу.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.

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

HTML + CSS песочница
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.