Атрибут class тега <dd>
Описание
Атрибут class для тега <dd> (description description) позволяет назначать один или несколько CSS-классов для стилизации элемента описания в списке определений (<dl>). Это основной способ применения стилей к конкретным элементам описания.
<dl>
<dt>HTML</dt>
<dd class="tech-description">Язык гипертекстовой разметки для создания веб-страниц</dd>
<dt>CSS</dt>
<dd class="tech-description important">Язык стилей для оформления веб-страниц</dd>
<dt>JavaScript</dt>
<dd class="tech-description">Язык программирования для создания интерактивности на веб-страницах</dd>
</dl>
Особенности работы:
| Синтаксис | Описание | Пример |
|---|---|---|
| Один класс | Применяет один класс к элементу | class="description" |
| Несколько классов | Применяет несколько классов через пробел | class="description highlighted" |
| Динамическое изменение | Классы можно изменять через JavaScript | element.classList.add('active') |
Рекомендации по именованию классов:
- Используйте осмысленные имена, отражающие назначение элемента
- Придерживайтесь единого стиля именования (BEM, kebab-case и др.)
- Избегайте имен, связанных с внешним видом (например, "red-text")
- Для модификаторов используйте префиксы (например, "--active")
Пример с CSS и JavaScript:
<style>
.term-definition {
margin-left: 2em;
color: #333;
}
.term-definition.highlighted {
background-color: #ffffcc;
padding: 0.5em;
}
</style>
<dl>
<dt>API</dt>
<dd class="term-definition" id="api-def">Интерфейс программирования приложений</dd>
</dl>
<script>
// Добавляем класс через JavaScript
document.getElementById('api-def').classList.add('highlighted');
</script>
Советы по использованию:
- Используйте классы для групповой стилизации элементов
<dd> - Комбинируйте с атрибутом
idдля точечного доступа к конкретным определениям - Применяйте классы-модификаторы для изменения состояния (активное, скрытое и т.д.)
- Для сложных структур используйте вложенные селекторы (например,
dl.advanced dd)
SEO рекомендации:
- Классы не влияют напрямую на SEO, но помогают в структурировании контента
- Используйте семантичные имена классов для лучшего понимания структуры
- Избегайте избыточного количества классов на одном элементе
Примечание: Атрибут class является глобальным и может использоваться на любом HTML-элементе. Для тега <dd> он особенно полезен при создании стилизованных списков определений с различными типами контента.