HTML <dd> тег
HTML тег <dd> задаёт описание термина в списке определений вместе с тегами <dl> и <dt>.
HTML тег <dd> (описание определения) задаёт описание термина в списке определений. Он работает только внутри <dl> (список определений), в паре с одним или несколькими элементами <dt> (термин определения), которые указывают, что именно описывается.
Группировка внутри <dl> гибкая — можно использовать:
- один термин с одним описанием,
- один термин с несколькими описаниями,
- несколько терминов (синонимов) с одним описанием,
- несколько терминов с несколькими описаниями.
Элемент <dd> может содержать другое содержимое: абзацы, списки, изображения, ссылки и т. д. Он размещается внутри <body> как дочерний элемент <dl>. По умолчанию браузеры добавляют <dd> отступ слева, чтобы описание визуально располагалось под термином.
Когда использовать список определений
Используйте <dl>/<dt>/<dd> для пар «имя — значение» — содержимого, где каждый элемент представляет собой метку и связанное с ней описание. Хорошо подходит для:
- Глоссариев — слово и его значение.
- Часто задаваемых вопросов (FAQ) — вопрос (
<dt>) и ответ (<dd>). - Таблиц характеристик товаров / метаданных — свойства, такие как «Вес», «Материал», «Артикул» и их значения.
Не используйте список определений только ради создания отступа или для произвольного набора элементов без меток. Для упорядоченных шагов используйте упорядоченный список (<ol>); для обычного набора элементов — неупорядоченный список (<ul>). Выбирайте список определений только тогда, когда каждая запись действительно является термином в паре с описанием.
Синтаксис
Тег <dd> используется парно. Содержимое записывается между открывающим (<dd>) и закрывающим (</dd>) тегами, и он должен находиться внутри <dl> после одного или нескольких элементов <dt>.
Пример: глоссарий
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Coffee glossary</h1>
<dl>
<dt>Espresso</dt>
<dd>A concentrated coffee brewed by forcing hot water through finely-ground beans.</dd>
<dt>Latte</dt>
<dd>Espresso with a large amount of steamed milk and a light layer of foam.</dd>
<dt>Americano</dt>
<dd>Espresso diluted with hot water for a lighter, longer drink.</dd>
</dl>
</body>
</html>Пример: таблица характеристик товара
У одного термина может быть несколько описаний <dd>, а несколько терминов <dt> могут разделять одно описание <dd>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Backpack specifications</h2>
<dl>
<dt>Capacity</dt>
<dd>28 liters</dd>
<dt>Material</dt>
<dd>Recycled polyester</dd>
<dd>Water-resistant coating</dd>
<dt>Color</dt>
<dt>Colour</dt>
<dd>Charcoal grey</dd>
</dl>
</body>
</html>Доступность
Элемент <dd> имеет неявную роль ARIA definition, а <dt> — роль term. Вспомогательные технологии используют структуру <dl>, чтобы озвучивать каждое описание вместе с соответствующим термином, поэтому семантическая разметка (а не имитация списка с помощью <div> и CSS) делает содержимое более удобным для навигации. Не добавляйте явный атрибут role — неявная роль уже задана правильно.
Атрибуты
Тег <dd> не имеет собственных атрибутов. Он поддерживает только Глобальные атрибуты и Атрибуты событий.
Стилизация HTML тега <dd>
Браузеры применяют к <dd> отступ слева по умолчанию (как правило, 40px). Его можно убрать или заменить с помощью CSS — например, убрать отступ и добавить собственные поля и стили:
dd {
margin-left: 0; /* remove the default left indent */
padding-left: 1rem; /* add your own spacing instead */
color: #555;
}
dt {
font-weight: bold;
}