Термин определения HTML dt

Введение

Элемент dt в HTML часто упоминают вскользь как «строка с термином в списке описаний». На практике он оказывается гораздо важнее, чем кажется. От того, как вы используете dt, зависит семантика документа, корректная работа вспомогательных технологий и качество структурирования информации.

Смотрите, я покажу вам, как с помощью dt вы можете:

• создавать четко структурированные глоссарии;
• описывать параметры и их значения;
• группировать сложные наборы терминов и определений;
• помогать поисковым системам и скринридерам лучше понимать вашу страницу.

Давайте по шагам разберем, что именно делает элемент dt, как он работает в связке с dl и dd, какие есть тонкости и частые ошибки при верстке.

Что такое dt и какая у него роль

Семантика элемента dt

Элемент dt (definition term) — это термин определения в списке описаний. То есть он обозначает имя или заголовок сущности, которую вы описываете, а само описание обычно располагается в элементе dd.

Элемент dt:

• всегда используется внутри контейнера dl;
• обычно идет перед одним или несколькими dd;
• служит логическим именем для последующих описаний.

Проще говоря, dt — это «что мы описываем», а dd — «как мы это описываем».

Минимальный пример

Давайте разберемся на простом примере глоссария:

<dl>
  <!-- Термин -->
  <dt>HTML</dt>
  <!-- Описание термина -->
  <dd>Язык разметки гипертекста, используемый для создания структуры веб-страниц.</dd>

  <!-- Второй термин -->
  <dt>CSS</dt>
  <!-- Описание второго термина -->
  <dd>Язык стилей, который определяет внешний вид HTML-элементов.</dd>
</dl>

Комментарии в коде помогут вам увидеть, как dt и dd работают в паре. dt — название сущности, dd — объяснение.

Контейнер dl и связь с dt

Почему dt нельзя использовать без dl

По стандарту HTML элемент dt должен находиться внутри dl. Использование dt вне списка описаний считается некорректной разметкой и может привести к:

• ошибкам в валидаторе;
• непредсказуемой интерпретации разметки браузерами;
• проблемам для скринридеров.

Правильная структура такова:

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

<!-- Неправильно: dt находится вне dl -->
<p>
  <dt>Неправильное использование</dt>
</p>

// Во втором фрагменте dt не обернут в dl — валидатор HTML сообщит об ошибке

Допустимое содержимое dl

Современный HTML позволяет внутри dl использовать:

• пары dt
  • dd;
• несколько dt подряд перед общим dd;
• несколько dd подряд, описывающих один dt;
• вложенные контейнеры (div) для группировки элементов.

Покажу вам, как это выглядит:

<dl>
  <!-- Группа: один термин и одно описание -->
  <dt>API</dt>
  <dd>Набор правил и спецификаций, по которым программы взаимодействуют друг с другом.</dd>

  <!-- Группа: два термина и одно общее описание -->
  <dt>Front-end</dt>
  <dt>Клиентская часть</dt>
  <dd>Часть веб-приложения, которая работает в браузере пользователя.</dd>

  <!-- Группа: один термин и два описания -->
  <dt>Git</dt>
  <dd>Система контроля версий с распределенной архитектурой.</dd>
  <dd>Инструмент для отслеживания изменений в коде и совместной разработки.</dd>
</dl>

// Здесь один dd относится сразу к двум dt — оба термина разделяют одно общее описание

Таким образом, dt никогда не существует сам по себе. Он всегда связан логикой документа с dd через общий контейнер dl.

Синтаксис и правила использования dt

Базовый синтаксис

Синтаксис элемента dt максимально простой:

<dt>Текст термина</dt>

Но при этом внутри dt вы можете использовать другие строчные (inline) элементы:

• code — для обозначения кода;
• abbr — для аббревиатур;
• span — для стилизации;
• a — для ссылок и т. д.

Давайте посмотрим на пример:

<dl>
  <!-- Используем code для обозначения имени функции -->
  <dt><code>append()</code> в Go</dt>
  <dd>Функция, которая добавляет элементы в срез и при необходимости расширяет его емкость.</dd>

  <!-- Используем abbr для аббревиатуры -->
  <dt><abbr title="Application Programming Interface">API</abbr></dt>
  <dd>Контракт взаимодействия между компонентами программного обеспечения.</dd>

  <!-- Используем ссылку внутри dt -->
  <dt><a href="#http-status-404">HTTP статус 404</a></dt>
  <dd>Код ответа сервера, означающий, что запрошенный ресурс не найден.</dd>
</dl>

// Здесь вы видите, что dt может содержать сложное форматирование, но сам по себе остается заголовком термина

Какие элементы можно вкладывать в dt

По спецификации в dt допустимы:

• текст;
• фразовые элементы (inline) — em, strong, span, code, kbd, abbr, a и т. д.;
• в HTML5 — иногда более сложные элементы, но на практике лучше ограничиваться тем, что логично выглядит как часть названия термина.

Не рекомендуется:

• помещать в dt большие блоки текста;
• вставлять туда целые списки или большие фрагменты разметки, которые по смыслу выглядят как описание, а не как имя термина.

Для длинных описаний всегда используйте dd.

Атрибуты dt

У dt нет специфичных атрибутов, как, например, у форм или медиаэлементов. Но вы можете использовать:

• глобальные атрибуты: class, id, style, title, data-* и др.;
• атрибуты ARIA, если есть потребность в дополнительной семантике для доступности.

Пример:

<dl>
  <!-- Добавляем идентификатор для якорной ссылки -->
  <dt id="term-rest-api" class="term term--important">
    REST API
  </dt>
  <dd>
    Стиль архитектуры веб-сервисов, использующий стандартные методы HTTP.
  </dd>
</dl>

<!-- Где-то ниже на странице мы можем сослаться на этот термин -->
<p>Подробнее об этом см. в разделе <a href="#term-rest-api">REST API</a>.</p>

// Атрибут id позволяет сослаться на определенный термин, а class — задать стили

Варианты структурирования списков описаний с dt

Одна пара dt + dd

Самый простой случай — когда у каждого термина одно описание:

<dl>
  <dt>GET</dt>
  <dd>HTTP метод, который запрашивает представление ресурса без его изменения.</dd>

  <dt>POST</dt>
  <dd>HTTP метод, который используется для создания нового ресурса или передачи данных.</dd>
</dl>

// Здесь каждый dt имеет свой отдельный dd — это классический глоссарий

Несколько dt для одного dd

Используется, когда у сущности есть несколько возможных названий, но описание у них общее. Например, синонимы:

<dl>
  <!-- Два термина, одно общее описание -->
  <dt>UI</dt>
  <dt>Пользовательский интерфейс</dt>
  <dd>Способ взаимодействия пользователя с программой через элементы управления и визуальные компоненты.</dd>
</dl>

// Оба варианта названия — UI и «Пользовательский интерфейс» — относятся к одному описанию

Такой прием удобен, если вы хотите, чтобы поиском по странице легко находились оба варианта названия, но описания не дублировались.

Один dt и несколько dd

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

<dl>
  <dt>Refactoring</dt>
  <dd>Процесс изменения внутренней структуры кода без изменения его внешнего поведения.</dd>
  <dd>Используется для упрощения поддержки, улучшения читаемости и расширяемости.</dd>
  <dd>Часто выполняется постепенно в рамках обычной разработки.</dd>
</dl>

// Здесь одно ключевое слово раскрывается через три элемента dd — каждый подчеркивает отдельный аспект

Группировка через div

HTML5 допускает группировку наборов dt + dd внутри dl с помощью div. Это удобно, когда вы хотите логически разделить несколько групп терминов и описаний или применить к группам разные стили.

Давайте посмотрим, как это может выглядеть:

<dl>
  <!-- Группа про HTTP методы -->
  <div class="group-http">
    <dt>GET</dt>
    <dd>Запрашивает представление ресурса. Не должен иметь побочных эффектов.</dd>

    <dt>POST</dt>
    <dd>Передает данные для обработки и может приводить к созданию ресурсов.</dd>
  </div>

  <!-- Группа про коды ответа -->
  <div class="group-status">
    <dt>200 OK</dt>
    <dd>Успешный запрос. Ответ содержит тело с данными.</dd>

    <dt>404 Not Found</dt>
    <dd>Ресурс не найден по указанному URI.</dd>
  </div>
</dl>

// Обертка div дает возможность выделить разные логические блоки внутри одного dl, например, разными фоновыми цветами

Обратите внимание, что не все старые браузеры одинаково хорошо поддерживали такую структуру, но в современных реализациях это стало стандартным подходом.

Практические сценарии использования dt

Глоссарии терминов

Классический случай: список терминов с определениями. Здесь dt работает почти как заголовок, но сохраняет связь с dd.

<section>
  <h2>Глоссарий терминов</h2>
  <dl>
    <dt>Middleware</dt>
    <dd>Прослойка между сервером и приложением, которая обрабатывает запросы и ответы.</dd>

    <dt>Latency</dt>
    <dd>Задержка между отправкой запроса и получением первого байта ответа.</dd>

    <dt>Throughput</dt>
    <dd>Количество запросов, которые система может обработать за единицу времени.</dd>
  </dl>
</section>

// Здесь h2 задает общий заголовок раздела, а dt — заголовки отдельных терминов внутри глоссария

Описание параметров API или функций

dt удобно использовать для описания параметров функции, настроек или аргументов команд:

<section>
  <h2>Параметры функции connect</h2>
  <dl>
    <dt>host</dt>
    <dd>Строка с адресом сервера к которому нужно подключиться.</dd>

    <dt>port</dt>
    <dd>Целое число с номером порта. По умолчанию используется 80.</dd>

    <dt>timeout</dt>
    <dd>Время ожидания ответа сервера в миллисекундах.</dd>
  </dl>
</section>

// Каждый параметр — это dt, а пояснение по его смыслу и типу — в dd

Такое описание визуально и семантически более понятно, чем обычный список ul, потому что явно разделяет имя сущности и ее объяснение.

Страница настроек или конфигураций

Для документации по настройкам приложения dt тоже очень подходит. Смотрите, я покажу вам пример с конфигурацией сервиса:

<section>
  <h2>Основные настройки сервера</h2>
  <dl>
    <dt>max_connections</dt>
    <dd>Максимальное количество одновременных подключений к серверу.</dd>

    <dt>log_level</dt>
    <dd>Уровень детализации логов. Возможные значения - debug info warn error.</dd>

    <dt>cache_ttl</dt>
    <dd>Время жизни кэша в секундах.</dd>
  </dl>
</section>

// Здесь dt четко отделяет названия настроек, а dd описывает их влияние и возможные значения

Сопоставление терминов на разных языках

Иногда dt удобно применять для двуязычных словарей или списков соответствий:

<section>
  <h2>Термины базы данных EN - RU</h2>
  <dl>
    <dt>Index</dt>
    <dd>Индекс - структура данных для ускорения выборок.</dd>

    <dt>Primary key</dt>
    <dd>Первичный ключ - уникальный идентификатор записи в таблице.</dd>

    <dt>Foreign key</dt>
    <dd>Внешний ключ - ссылка на первичный ключ другой таблицы.</dd>
  </dl>
</section>

// dt здесь — английский термин, dd — русскоязычное объяснение

Мини-документация по API в интерфейсе

В пользовательском интерфейсе иногда отображают краткий справочник по действиям:

<aside>
  <h2>Горячие клавиши</h2>
  <dl>
    <dt><kbd>Ctrl</kbd> + <kbd>S</kbd></dt>
    <dd>Сохранить текущий документ.</dd>

    <dt><kbd>Ctrl</kbd> + <kbd>Z</kbd></dt>
    <dd>Отменить последнее действие.</dd>

    <dt><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd></dt>
    <dd>Открыть палитру команд.</dd>
  </dl>
</aside>

// Здесь dt содержит комбинацию клавиш, а dd — действие, которое выполняется

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

Сам по себе dt обычно отображается браузерами как блочный элемент с жирным шрифтом, но точный стиль зависит от конкретного браузера. На практике почти всегда имеет смысл задать свои стили.

Базовая стилизация

Давайте посмотрим, как можно оформить список описаний:

<style>
  dl {
    /* Ограничиваем ширину и задаем отступы вокруг всего списка */
    max-width: 600px;
    margin: 1.5rem auto;
  }

  dt {
    /* Делаем термины чуть более заметными */
    font-weight: 600;
    margin-top: 1rem;
  }

  dd {
    /* Добавляем отступ слева, чтобы описания визуально отличались */
    margin-left: 1.5rem;
    margin-top: 0.25rem;
    color: #444;
  }
</style>

<dl>
  <dt>Latency</dt>
  <dd>Задержка между отправкой запроса и получением ответа.</dd>

  <dt>Bandwidth</dt>
  <dd>Максимальный объем данных, передаваемых за единицу времени.</dd>
</dl>

// Здесь вы видите, что с помощью CSS мы визуально разделяем dt и dd, улучшая читаемость

Выравнивание термина и описания в две колонки

Иногда нужно сделать термин и описание в два столбца: термин слева, определение справа. Это типичный формат справочников.

Покажу вам один из способов:

<style>
  .definitions {
    /* Включаем сетку для всего списка описаний */
    display: grid;
    grid-template-columns: 1fr 3fr; /* Левая колонка уже правой */
    column-gap: 1rem;
  }

  .definitions dt {
    /* Выравниваем термин по правому краю и делаем его выделенным */
    font-weight: 600;
    text-align: right;
  }

  .definitions dd {
    /* Убираем стандартный отступ браузера */
    margin: 0 0 0.5rem 0;
  }
</style>

<dl class="definitions">
  <dt>host</dt>
  <dd>Адрес сервера для подключения.</dd>

  <dt>port</dt>
  <dd>Номер порта для подключения к серверу.</dd>

  <dt>secure</dt>
  <dd>Логический флаг, указывающий, использовать ли защищенное соединение.</dd>
</dl>

// Сетка распределяет dt и dd по колонкам, при этом их семантика полностью сохраняется

Стили для нескольких dt подряд

Когда к одному dd относятся несколько терминов, можно визуально сгруппировать dt:

<style>
  .multi-term dt {
    /* Выводим термины в одну строку */
    display: inline;
    font-weight: 600;
  }

  .multi-term dt::after {
    /* Добавляем разделитель после каждого термина */
    content: ", ";
  }

  .multi-term dt:last-of-type::after {
    /* После последнего термина запятая не нужна */
    content: "";
  }

  .multi-term dd {
    margin-left: 0;
  }
</style>

<dl class="multi-term">
  <dt>Front-end</dt>
  <dt>Клиентская часть</dt>
  <dd>Часть приложения, которая выполняется в браузере пользователя.</dd>
</dl>

// Здесь мы показываем несколько имен для одного понятия в виде одного перечня, но при этом структура dt + dt + dd сохраняется

Влияние dt на доступность и работу скринридеров

Как скринридеры воспринимают dt

С точки зрения доступности список описаний (dl) воспринимается как коллекция пар:

• dt — «имя элемента списка»;
• dd — «значение элемента списка».

Скринридеры зачитывают:

• термин;
• затем его определение.

Если структура соблюдена корректно, пользователям, которые используют специальные средства, будет проще понимать, что сейчас описывается.

Пример, который будет корректно озвучен:

<dl>
  <dt>HTTP 500</dt>
  <dd>Ошибка сервера. Запрос не может быть обработан из-за внутренней ошибки.</dd>
</dl>

// Скринридер сначала зачитает «HTTP 500», затем «Ошибка сервера...», сохраняя логическую связь

Зачем важно не подменять dt другими элементами

Иногда разработчики пытаются использовать обычные списки ul и li для описаний:

<!-- Так делать не стоит -->
<ul>
  <li><strong>host</strong> — Адрес сервера</li>
  <li><strong>port</strong> — Номер порта</li>
</ul>

Формально это будет работать и визуально может выглядеть нормально, но:

• семантика «термин + определение» не будет явно выражена;
• вспомогательные технологии не распознают структуру как список описаний;
• вы теряете возможность явно выразить связь между термином и определением в DOM.

Использование dt и dd вместо этого улучшает семантику без существенных затрат:

<dl>
  <dt>host</dt>
  <dd>Адрес сервера.</dd>

  <dt>port</dt>
  <dd>Номер порта.</dd>
</dl>

// Здесь связь между именем и значением выражена явно — это полезно и для людей и для машин

ARIA-атрибуты и dt

Как правило, dt не требует специальных ARIA-атрибутов. Однако в более сложных интерфейсах можно использовать:

• role="term" для dt;
• role="definition" для dd.

В большинстве случаев добавлять эти роли не нужно, потому что dt и dd уже имеют соответствующее поведение по умолчанию, но иногда это делают для совместимости с некоторыми старыми технологиями.

Пример:

<dl>
  <dt role="term">Cache</dt>
  <dd role="definition">Локальное хранилище часто используемых данных для ускорения доступа.</dd>
</dl>

// Обычно этого не требуется, но такой подход можно встретить в проектах с особыми требованиями по доступности

Частые ошибки при работе с dt

Использование dt вне dl

Самая базовая ошибка — использовать dt в отрыве от контейнера dl. Браузер может попытаться что-то интерпретировать, но HTML-валидатор это отметит как ошибку.

Ошибка:

<!-- Неправильно -->
<dt>Настройки подключения</dt>
<dd>Описание настроек.</dd>

// Здесь отсутствует контейнер dl, поэтому структура нарушена

Правильно:

<!-- Правильно -->
<dl>
  <dt>Настройки подключения</dt>
  <dd>Описание настроек.</dd>
</dl>

Вложение dt в другие списки

Еще одна распространенная ошибка — вкладывать dt внутрь ul или ol вместо использования li.

<!-- Неправильно -->
<ul>
  <dt>host</dt>
  <dd>Адрес сервера.</dd>
</ul>

// Здесь ul ожидает li внутри, а не dt и dd

Правильный вариант — либо использовать dl, либо, если вам нужен простой список без явных определений, замените dt / dd на li.

Использование dt как обычного заголовка

Иногда dt используют для оформления заголовка раздела, например:

<!-- Плохая практика -->
<dl>
  <dt>Настройки сервера</dt>
</dl>
<p>Текст раздела...</p>

// Это не список описаний, а попытка использовать dt вместо h2 или h3

В таком случае правильнее использовать заголовки (h2, h3 и т. д.), а dt оставить только для тех случаев, когда действительно есть термин и его определение.

Слишком большие блоки текста в dt

dt предназначен для названия термина, а не для длинных предложений. Если термин очень длинный, лучше подумать, не является ли это уже описанием.

Неудачный пример:

<dl>
  <dt>Функция которая подключается к серверу по адресу host и порту port и возвращает соединение</dt>
  <dd>Возвращает структуру Connection.</dd>
</dl>

// Здесь dt фактически содержит определение, а не краткий термин

Лучше сократить термин:

<dl>
  <dt>connect(host, port)</dt>
  <dd>Функция, которая устанавливает соединение с сервером и возвращает структуру Connection.</dd>
</dl>

Практические рекомендации по проектированию структур с dt

Когда стоит использовать dl / dt / dd

Используйте список описаний с dt, когда:

• у вас есть явная структура «имя + описание»;
• вы описываете свойства, параметры, настройки, термины;
• вы хотите улучшить семантику документа и упростить навигацию.

Не стоит использовать dt, если:

• это просто маркированный список пунктов без четкого разделения имени и описания;
• вы хотите просто визуально выделить текст, но семантика «термин — определение» отсутствует.

Как выбирать названия терминов в dt

Несколько практических советов:

• делайте названия короткими и точными;
• избегайте излишних пояснений внутри dt — переносите их в dd;
• используйте единый стиль: либо все термины на английском, либо все на русском в рамках одного списка;
• если есть синонимы — используйте несколько dt, а не складывайте оба названия в один dt через дефис, если это ухудшает читаемость.

Пример хорошей практики:

<dl>
  <dt>Retry policy</dt>
  <dd>Политика повтора запросов в случае неудачи.</dd>

  <dt>Backoff</dt>
  <dd>Стратегия увеличения интервалов между повторами запросов.</dd>
</dl>

// Краткие названия в dt, развернутое объяснение — в dd

Организация больших глоссариев

Если у вас большой глоссарий, имеет смысл разбивать его на блоки:

• по алфавиту (A–Z);
• по тематическим разделам;
• по типам сущностей (настройки, ошибки, типы данных и т. д.).

Можно использовать несколько dl или разделять блоки заголовками h2 / h3:

<h2>Термины по HTTP</h2>
<dl>
  <dt>HTTP</dt>
  <dd>Протокол передачи гипертекста.</dd>

  <dt>Header</dt>
  <dd>Метаданные, передаваемые вместе с запросами и ответами.</dd>
</dl>

<h2>Термины по БД</h2>
<dl>
  <dt>Transaction</dt>
  <dd>Набор операций с базой данных, выполняемых как единое целое.</dd>
</dl>

// Так пользователю проще ориентироваться и находить нужные термины

Теперь давайте подведем итоги.

dt — это семантический инструмент, который позволяет ясно выразить структуру «термин — определение». Если вы правильно его используете внутри dl в связке с dd, вы:

• улучшаете структуру документа;
• делаете интерфейс понятнее для пользователей и машин;
• упрощаете поддержку и развитие документации.

Частозадаваемые технические вопросы по теме и ответы

Как правильно связать несколько dt и несколько dd между собой

Если несколько терминов относятся к общему набору определений, просто записывайте все dt подряд, а потом все dd подряд. Браузер и скринридеры воспримут их как одну логическую группу:

<dl>
  <dt>UI</dt>
  <dt>UX</dt>
  <dd>Области проектирования интерфейсов и пользовательского опыта.</dd>
  <dd>Часто рассматриваются совместно в процессе разработки продукта.</dd>
</dl>

// Здесь оба dd относятся к обоим dt

Можно ли вкладывать один dl с dt внутрь другого dd

Да, можно. Это хороший способ описывать вложенные структуры. Например, параметры объекта:

<dl>
  <dt>DatabaseConfig</dt>
  <dd>
    <dl>
      <dt>host</dt>
      <dd>Адрес сервера базы данных.</dd>

      <dt>port</dt>
      <dd>Порт для подключения.</dd>
    </dl>
  </dd>
</dl>

// Внутренний dl описывает свойства объекта, который упомянут во внешнем dt

Как сделать так, чтобы термин dt был кликабельным и вел к подробному описанию

Вложите ссылку a внутрь dt и укажите href на нужный якорь или страницу:

<dl>
  <dt><a href="/docs/http-404">HTTP 404</a></dt>
  <dd>Краткое описание ошибки. Полные детали по ссылке.</dd>
</dl>

// Семантика dt при этом сохраняется, а термин становится ссылкой

Как использовать dt, если нужно добавить иконку к термину

Вы можете добавить иконку внутрь dt с помощью span или тега img/svg:

<dl>
  <dt>
    <span class="icon icon-warning"></span>
    Warning level
  </dt>
  <dd>Уровень предупреждений для логирования.</dd>
</dl>

// Стилизуйте .icon через CSS или используйте встроенный SVG

Как организовать поиск по терминам dt на странице

Простой путь — найти все элементы dt через JavaScript, собрать их текст и реализовать фильтрацию:

<script>
  // Находим все элементы dt
  const terms = Array.from(document.querySelectorAll("dt"));

  // Функция фильтрации по строке запроса
  function filterTerms(query) {
    terms.forEach(term => {
      // Проверяем, содержит ли текст термина подстроку
      const matches = term.textContent.toLowerCase().includes(query.toLowerCase());
      // Показываем или скрываем dt и соответствующие dd
      const dd = term.nextElementSibling; // Предполагаем одну пару dt + dd
      term.style.display = matches ? "" : "none";
      if (dd && dd.tagName.toLowerCase() === "dd") {
        dd.style.display = matches ? "" : "none";
      }
    });
  }
</script>

// Здесь мы для простоты считаем, что у каждого dt один dd сразу после него; для более сложных структур логику нужно доработать