Тег <dt> используется для определения термина в списке описаний.

Синтаксис тега <dt>

<dl>
  <dt>Термин</dt>
  <dd>Описание</dd>
</dl>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <dt> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

Примеры использования

Простой список описаний:

<dl>
  <dt>HTML</dt>
  <dd>Hyper Text Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dt>JS</dt>
  <dd>JavaScript</dd>
</dl>

Список описаний с вложенными списками:

<dl>
  <dt>Web Development</dt>
  <dd>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JS</li>
    </ul>
  </dd>
  <dt>Database</dt>
  <dd>
    <ul>
      <li>MySQL</li>
      <li>PostgreSQL</li>
    </ul>
  </dd>
</dl>

Список описаний со ссылками:

<dl>
  <dt>HTML</dt>
  <dd>
    Hyper Text Markup Language — это язык разметки, используемый для создания
веб-страниц. Узнайте больше о нем на сайте <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN</a>.
  </dd>
  <dt>CSS</dt>
  <dd>
Каскадные таблицы стилей - это язык таблиц стилей, используемый для описания представления документа, написанного на HTML. Узнайте больше о нем на сайте <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">MDN</a>.
  </dd>
</dl>

Для чего использовать тег <dt>

  • создать глоссарий терминов;
  • предоставить список определений;
  • создать список терминов и их значений, подобный словарю;
  • создать индекс терминов на веб-странице;
  • предоставить список аббревиатур и их значений;
  • создать список часто задаваемых вопросов (FAQ).

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

У тега нет специфических атрибутов.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

  • тег <dt> следует использовать только внутри тега <dl>;
  • если тег <dt> используется без соответствующего тега <dd>, он будет рассматриваться как пустой термин, и с ним не будет связано никакое определение.

Нюансы

Не рекомендуется использовать тег <dt> для заголовков, так как он не обеспечивает того же семантического значения, что и теги <h1><h6>.

Поддержка браузеров

Тег поддерживается всеми современными браузерами.

Актуальная информация — на сaniuse.

Альтернативные теги

Альтернативных тегов для тега <dt> не существует. Однако тег <dfn> может быть использован для определения термина в документе, что может быть альтернативой в некоторых случаях.

Чем заменить тег

Прямой замены тегу <dt> не существует.

Актуальность

Тег не является устаревшим и по-прежнему широко используется в HTML.


Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023