HTML-тег <dt>

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

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

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

Основной синтаксис тега <dt> следующий: 

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

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

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

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

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

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

<!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-тега dt

Пояснение: Теги <dt> определяют термины(«HTML», «CSS», «JavaScript»), а теги <dd> предоставляют их описания.

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

Тег <dt> можно стилизовать с помощью CSS, чтобы улучшить его внешний вид и отличить от описаний: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            dt {
                font-weight: bold;
                font-size: 1.2em;
                color: #333;
                margin-top: 10px;
            }

            dd {
                margin-left: 20px;
                color: #555;
            }
        </style>
    </head>
    <body>
        <h2>Styled Description List</h2>
        <dl>
            <dt>Planet 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>
Оформление тега dt с помощью CSS

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

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

За одним тегом <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>
Использование нескольких описаний с одним термином

Объяснение: Термин «JavaScript» определяется один раз с помощью одного <dt> , но у него есть два связанных описания.

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

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

Расширенный пример: вложенные списки описаний

Вы можете вкладывать списки описаний, используя тег <dt> для создания иерархических структур: 

<!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>
Вложенные списки описаний

Пояснение: В этом примере родительский список описаний содержит термины(например, «Фрукты»), которые ведут к вложенным спискам для более подробных описаний.