HTML-тег <dd>

HTML-тег <dd> используется для определения описания или определения термина в списке описаний. Он является дочерним элементом элемента <dl> (список описаний) и работает в паре с тегом <dt> , который определяет описываемый термин.

Комбинация тегов <dl> , <dt> и <dd> используется для создания семантических и структурированных списков для определений, пар ключ-значение или другого описательного контента.

Базовый синтаксис HTML-тега <dd>

Базовая структура списка описаний с использованием тега <dd> следующая: 

<dl>
    <dt>Term 1</dt>
    <dd>Description of Term 1</dd>

    <dt>Term 2</dt>
    <dd>Description of Term 2</dd>
</dl>

Тег <dd> всегда должен располагаться внутри элемента <dl> и следовать сразу за тегом <dt> .

Атрибуты HTML-тега <dd>

  • Глобальные атрибуты: тег <dd> поддерживает все глобальные атрибуты, такие как class , id , style и data-* .
  • Атрибуты событий: Тег <dd> поддерживает все атрибуты событий, такие как onclick , onmouseover и onkeydown .

Базовый пример HTML-тега <dd>

Вот простой пример списка описаний с использованием тега <dd> : 

<!DOCTYPE html>
<html>
    <body>
        <h2>Description List Example</h2>
        <dl>
            <dt>HTML</dt>
            <dd>A markup language used to create web pages.</dd>

            <dt>CSS</dt>
            <dd>A stylesheet language used to style web pages.</dd>

            <dt>JavaScript</dt>
            <dd>A programming language used to create interactive web pages.</dd>
        </dl>
    </body>
</html>
Базовый пример HTML-тега dd

Пояснение: Теги <dt> определяют термины, а теги <dd> предоставляют соответствующие описания. Таким образом, создаётся семантический список определений.

Использование тега <dd> для пар ключ-значение

Тег <dd> также можно использовать для представления пар ключ-значение, таких как технические спецификации: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Product Specifications</h2>
        <dl>
            <dt>Processor</dt>
            <dd>Intel Core i7</dd>

            <dt>RAM</dt>
            <dd>16 GB</dd>

            <dt>Storage</dt>
            <dd>512 GB SSD</dd>
        </dl>
    </body>
</html>
Использование тега dd для пар ключ-значение

Пояснение: Каждый тег <dt> представляет характеристику продукта, тогда как соответствующий тег <dd> описывает ее значение.

Стилизация тега <dd> с помощью CSS

Тег <dd> можно стилизовать с помощью CSS для лучшего визуального представления: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            dt {
                font-weight: bold;
                color: #333;
                color: green;
            }
            dd {
                margin-left: 20px;
                color: #555;
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <h2>Styled Description List</h2>
        <dl>
            <dt>Sun</dt>
            <dd>The star at the center of our solar system.</dd>

            <dt>Earth</dt>
            <dd>The third planet from the Sun.</dd>

            <dt>Moon</dt>
            <dd>The natural satellite of Earth.</dd>
        </dl>
    </body>
</html>
Оформление тега dd с помощью CSS

Результат: теги <dt> отображаются жирным шрифтом и зеленым цветом, а теги <dd> имеют отступ и курсив с более светлым цветом для различения.

Особые случаи для HTML-тега <dd>

Использование нескольких описаний для одного термина

Один термин( <dt> ) может иметь несколько описаний( <dd> ): 

<!DOCTYPE html>
<html>
    <body>
        <h2>Multiple Descriptions Example</h2>
        <dl>
            <dt>JavaScript</dt>
            <dd>A programming language for the web.</dd>
            <dd>Used for building dynamic and interactive web applications.</dd>
        </dl>
    </body>
</html>
Использование нескольких описаний(тегов dd) для одного термина

Объяснение: Термин JavaScript имеет два связанных описания, каждое из которых находится внутри отдельного тега <dd> .