HTML тег <dt>
Тег <dt> используется для обозначения термина в списке описаний. Описание тега, атрибуты и примеры.
Тег <dt> (сокращение от description term, ранее definition term) обозначает термин, определяемый внутри списка описаний. Это один из трёх тегов, из которых строится такой список, наряду с <dl> и <dd>:
<dl>оборачивает весь список (список описаний).<dt>задаёт название термина, например слово в глоссарии или метку метаданных.<dd>предоставляет описание или значение для предшествующего термина.
Используйте список описаний всегда, когда содержимое представляет собой набор пар имя/значение: глоссарий, вопросы и ответы FAQ, метаданные в формате ключ/значение или определения терминов. Для упорядоченного или маркированного содержимого используйте другой тип списка — см. обзор списков HTML.
Правила структуры
Элемент <dt> имеет два требования, которые необходимо соблюдать для корректной и доступной разметки:
<dt>должен быть прямым дочерним элементом<dl>. Он не может использоваться самостоятельно вне списка описаний (или, в современном HTML, внутри одного обёрточного<div>непосредственно внутри<dl>).<dt>должен располагаться перед своим<dd>. Каждая группа начинается с одного или нескольких терминов (<dt>), за которыми следуют одно или несколько описаний (<dd>). Элемент<dd>описывает предшествующий ему элемент (элементы)<dt>.
Тег <dt> используется парно: содержимое размещается между открывающим тегом <dt> и закрывающим тегом </dt>.
Пример HTML-тега <dt>:
HTML тег <dt>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<dl>
<dt>Hypertext</dt>
<dd>A system of text pages that have cross-references.</dd>
<dt>Hyperlink</dt>
<dd>A part of a hypertext document that references another item.</dd>
</dl>
</body>
</html>Результат
Несколько терминов и несколько описаний
Группа описаний не ограничена одним термином и одним описанием. Вы можете объединять несколько элементов <dt> и <dd> в одну группу.
Несколько <dt> для одного <dd> — используйте это, когда несколько терминов имеют одно определение, например синонимы или альтернативные написания:
<dl>
<dt>Firefox</dt>
<dt>Mozilla Firefox</dt>
<dt>Fx</dt>
<dd>A free, open-source web browser developed by the Mozilla Foundation.</dd>
</dl>Несколько <dd> для одного <dt> — используйте это, когда один термин имеет более одного значения или смысла:
<dl>
<dt>Coffee</dt>
<dd>A hot beverage brewed from roasted coffee beans.</dd>
<dd>The seeds of the coffee plant.</dd>
</dl>Практический пример: метаданные товара
Списки описаний отлично подходят для метаданных в формате ключ/значение. Здесь каждый <dt> — это метка, а каждый <dd> — её значение:
<dl>
<dt>Product name</dt>
<dd>Mechanical Keyboard K3</dd>
<dt>Manufacturer</dt>
<dd>Keychron</dd>
<dt>Connectivity</dt>
<dd>Bluetooth 5.1</dd>
<dd>USB-C (wired)</dd>
<dt>Price</dt>
<dd>$79.99</dd>
</dl>Обратите внимание: термин Connectivity имеет два значения <dd> — удобный способ перечислить несколько значений для одной метки.
Отображение по умолчанию
Браузеры не применяют к <dt> никаких специальных стилей по умолчанию: термин отображается обычным (не жирным) шрифтом, а каждый следующий <dd> имеет отступ под ним. Визуальная иерархия, которую обычно ожидают от глоссария — выделение терминов жирным — достигается с помощью CSS, а не браузерных настроек по умолчанию.
Атрибуты
Тег <dt> поддерживает глобальные атрибуты и атрибуты событий.
Как стилизовать HTML-тег <dt>
Фрагмент ниже переопределяет отображение по умолчанию: он делает термины жирными и задаёт им отличительный цвет, чтобы они выделялись на фоне описаний.
dt {
font-weight: bold;
color: #2c3e50;
}Доступность
Списки описаний несут смысловую нагрузку помимо визуального представления. Программы чтения с экрана распознают структуру <dl>/<dt>/<dd> и объявляют каждый <dt> как термин вместе с соответствующим описанием <dd>, поэтому пользователи воспринимают термин и его значение как связанную пару. Имитация того же внешнего вида с помощью обычных абзацев и CSS разрушает эту связь. Используйте настоящий список описаний всегда, когда содержимое действительно является набором пар термин/описание.