HTML-тег <dl>

HTML-тег <dl> используется для определения списка описаний, представляющего собой набор терминов и соответствующих им описаний. Он обеспечивает семантическую структуру для представления пар «ключ-значение» или других отношений, в которых элементы имеют описательное содержание.

Элемент <dl> содержит дочерние элементы:

  • <dt> : Определяет термин(или имя).
  • <dd> : Определяет описание или значение, связанное с термином.

Такая структура делает тег <dl> идеальным для глоссариев, пар «ключ-значение», часто задаваемых вопросов и аналогичных вариантов использования.

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

Базовая структура списка описаний: 

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

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

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

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

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

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

Вот простой пример списка описаний: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Description List Example</h2>
        <dl>
            <dt>HTML</dt>
            <dd>A markup language for creating 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-тега dl

Пояснение: Теги <dt> определяют термины, а теги <dd> предоставляют их описания.

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

Вы можете стилизовать элементы <dl> , <dt> и <dd> с помощью CSS для улучшения читабельности: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            dl {
                border: 1px solid #ccc;
                padding: 10px;
                margin: 20px 0;
            }
            dt {
                font-weight: bold;
                color: #333;
            }
            dd {
                margin-left: 20px;
                color: #666;
            }
        </style>
    </head>
    <body>
        <h2>Styled Description List</h2>
        <dl>
            <dt>Earth</dt>
            <dd>The third planet from the Sun in the Solar System.</dd>

            <dt>Sun</dt>
            <dd>The star at the center of the Solar System.</dd>

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

Результат: список описаний отображается с жирным шрифтом и описаниями с отступом для более четкого макета.

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

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

<!DOCTYPE html>
<html>
    <body>
        <h2>Key-Value Pair Example</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>
Использование тега dl для пар ключ-значение

Пояснение: теги <dt> представляют ключи(например, «Процессор»), тогда как теги <dd> представляют значения(например, «Intel Core i7»).

Практическое применение тега <dl>

  • Глоссарии: определение терминов и их значений в образовательном контенте или документации.
  • Спецификации: представляют собой технические характеристики или списки характеристик.
  • Часто задаваемые вопросы: используйте структуру <dl> для вопросов и ответов.

Вложенные списки описаний

Вы можете вкладывать списки описаний для создания иерархических отношений: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Nested Description List</h2>
        <dl>
            <dt>Fruits</dt>
            <dd>
                <dl>
                    <dt>Apple</dt>
                    <dd>A sweet fruit.</dd>

                    <dt>Banana</dt>
                    <dd>A tropical fruit.</dd>
                </dl>
            </dd>

            <dt>Vegetables</dt>
Вложенные списки описаний

Пояснение: В этом примере один список описаний вложен в другой, чтобы сгруппировать связанные термины и их описания по категориям.