Код Справочник по фронтенду

#статьи

15 авг 2025
0

Теги <dl>, <dt>, <dd>: для чего нужны, как их использовать

Рассказываем, что такое список определений и как его создать в HTML.

Иллюстрация: Polina Vari для Skillbox Media

Марина Демидова

Программист, консультант, специалист по документированию. Легко и доступно рассказывает о сложных вещах в программировании и дизайне.

Иногда нужно представить данные в формате «термин — описание»: расшифровать аббревиатуру, перечислить характеристики устройства или дать краткую инструкцию. В HTML для этого есть специальная структура — список определений. Он создаётся с помощью трёх тегов: <dl>, <dt>, <dd>.

В статье разберёмся, как они работают.

Содержание:

Как создать список определений
Когда использовать теги
Как создавать список определений правильно
Атрибуты тегов <dl>, <dt>, <dd>
Как поисковики и экранные читалки понимают список определений
Чем <dl> отличается от списков <ul> и <ol>
Как оформить список определений с помощью CSS
Как списки определений отражаются в разных браузерах и на мобильных устройствах
Ошибки при работе со списками определений

Как создать список определений

Это делается с помощью трёх тегов:

<dl> — контейнер для списка (от definition list);
<dt> — термин, который нужно объяснить (от definition term);
<dd> — описание термина (от definition description).

Вот как это выглядит в коде:

<dl>
  <dt>HTML</dt>
  <dd>Язык разметки для создания веб-страниц.</dd>

  <dt>CSS</dt>
  <dd>Язык оформления HTML-документов.</dd>
</dl>

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

*Скриншот: Google Chrome / Skillbox Media*

Когда использовать теги

Теги <dl>, <dt> и <dd> применяются, когда нужно отобразить структурированную информацию, например:

термины с расшифровкой (глоссарии);
список вопросов и ответов (FAQ);
характеристики товара или профиля;
краткие инструкции и справки;
метаданные — дата публикации, автор, категория и так далее.

Выглядит это следующим образом.

Список вопросов и ответов:

<dl>
  <dt>Как создать сайт?</dt>
  <dd>Изучите HTML, CSS и JavaScript.</dd>
  
  <dt>Где найти учебники?</dt>
  <dd>В интернете, например, MDN.</dd>
</dl>

В браузере мы увидим это:

Характеристики товара или профиля пользователя:

<dl>
  <dt>Процессор:</dt>
  <dd>Intel Core i7</dd>
  
  <dt>Оперативная память:</dt>
  <dd>16 ГБ DDR4</dd>
  
  <dt>Видеокарта:</dt>
  <dd>NVIDIA RTX 3060</dd>
</dl>

Вывод:

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

Список определений должен строго соблюдать последовательность: термин (<dt>) — описание (<dd>). Каждый <dt> может иметь одно или несколько <dd> — и наоборот: несколько <dt> могут быть описаны одним <dd>. Главное, чтобы между ними была логическая связь.

Рассмотрим разные типы структур и поясним, когда какая применяется.

Структура 1: один термин — одно описание

Обычная структура для глоссариев или справок, когда каждому термину соответствует одно определение.

<dl>
  <dt>Frontend</dt>
  <dd>Часть веб-разработки, отвечающая за внешний вид сайта.</dd>
</dl>

Структура 2: несколько терминов — одно описание

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

<dl>
  <dt>JS</dt>
  <dt>JavaScript</dt>
  <dd>Язык программирования для взаимодействия с элементами страницы.</dd>
</dl>

В браузере мы увидим следующее:

Структура 3: один термин — несколько описаний

Подходит, если нужно дать термину развернутое описание или привести несколько аспектов/толкований.

<dl>
  <dt>API</dt>
  <dd>Интерфейс взаимодействия программ.</dd>
  <dd>Набор функций для работы с внешними сервисами.</dd>
</dl>

В браузере будет так:

Структура 4: отображение метаданных (пар «ключ-значение»)

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

<h3>Информация о статье</h3>
<dl>
  <dt>Автор</dt>
  <dd>Таня Кузнецова</dd>

  <dt>Дата публикации</dt>
  <dd>21 июля 2025</dd>

  <dt>Категория</dt>
  <dd>HTML-разметка</dd>

  <dt>Просмотры</dt>
  <dd>1 245</dd>
</dl>

В браузере будет вот так:

Что нельзя делать

Помещать в <dl> элементы, не относящиеся к структуре описания (например, <li>, <p> без контекста и так далее).
Начинать с <dd> без предваряющего <dt>.
Перемешивать <dt> и <dd> бессистемно (например, <dt>, <dd>, <dd>, <dt> — это допустимо, но становится трудночитаемым).

Рекомендации

Не используйте пустые теги <dt> или <dd>.
Не вставляйте внутри <dt> и <dd> блочные элементы вроде <div>, если в этом нет крайней необходимости. Это нарушает семантику и разметку, может привести к ошибкам и снижает доступность.
Если всё же нужны вложенные элементы, используйте <span>, <strong>, <a> и другие строчные теги, например:

<dl>
  <dt><strong>HTML</strong></dt>
  <dd>
    Язык <em>разметки</em>, используемый для создания структуры веб-страниц.
    Пример тега: <code>&lt;div&gt;</code>.
    Подробнее см. на сайте
    <a href="https://developer.mozilla.org/ru/docs/Web/HTML" target="_blank">
      MDN Web Docs
    </a>.
  </dd>

  <dt>CSS</dt>
  <dd>
    <span style="color: teal;">Технология оформления</span> веб-страниц.
    Стили описываются с помощью деклараций, например:
    <code>font-size: 16px;</code>.
  </dd>

  <dt>JavaScript</dt>
  <dd>
    <strong>Скриптовый язык</strong>, позволяющий делать страницы интерактивными.
    Подробнее: <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript" target="_blank">документация JS</a>.
  </dd>
</dl>

В браузере это будет выглядеть так:

Атрибуты тегов <dl>, <dt>, <dd>

Все три тега принимают только глобальные атрибуты, то есть:

id, class — для идентификации и привязки стилей;
lang, dir — для указания языка и направления текста;
title — дополнительная подсказка при наведении;
style, tabindex, события (onclick и другие) и так далее.

Специальных, уникальных атрибутов у них нет — всё работает в рамках тех же правил, что и у большинства других HTML-элементов.

Как поисковики и экранные читалки понимают список определений

HTML помогает поисковым системам и специальные программам для людей с нарушением зрения лучше понимать сайт. Список определений с тегами <dl>, <dt> и <dd> — это семантическая структура, которая как раз и помогает сделать код понятнее и для браузера, и для скринридера.

Поисковые системы

Поисковая система видит не сам текст, а HTML-структуру страницы. Когда вы используете теги <dl>, <dt> и <dd>, она понимает, что это не просто абзацы, а логически связанные пары — термин и его расшифровка.

Например:

<dl>
  <dt>Автор</dt>
  <dd>Алексей Смирнов</dd>

  <dt>Дата публикации</dt>
  <dd>26 июля 2025</dd>
</dl>

Поисковая система может воспринять такой текст как описание страницы и использовать его, например, в расширенном сниппете на странице поиска. Это будет полезно, если вы создаёте карточки товаров, справочные блоки или глоссарии.

Чтобы такая структура сработала, нужно соблюдать порядок: <dt> — это всегда термин, а <dd> — его описание. Внутри <dl> не должно быть лишних тегов вроде <p> или <li> — они только мешают.

Скринридеры

Скринридеры — это программы, которые озвучивают содержимое сайта вслух. Их используют люди с нарушением зрения. Для таких пользователей важно не только то, что написано на экране, но и как информация организована.

Если список определений размечен правильно, читалка скажет примерно так: «Список определений. Элемент 1 из 3. Термин: HTML. Описание: Язык разметки веб-страниц».

Но не все читалки работают одинаково. Например:

VoiceOver (на macOS и iPhone) и NVDA (на Windows) обычно читают такие списки корректно;
TalkBack на Android может не воспринимать список как единое целое;
Safari может игнорировать дополнительную разметку, если вы вручную укажете роли role="term" и role="definition".

В HTML есть специальный атрибут role — с его помощью можно указать, какую роль играет элемент на странице. Например, если вы пишете: <div role="button">Купить</div>, то браузер и читалка будут воспринимать обычный <div> как кнопку. В случае списка определений это лишнее. Теги <dt> и <dd> имеют нужную роль — браузер и читалка и так понимают, что это список определений. Дополнительные роли только мешают.

Поэтому лучше не добавлять к тегам <dt> и <dd> ничего лишнего — стандартной разметки достаточно, чтобы всё работало как надо.

Чем <dl> отличается от списков <ul> и <ol>

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

Если нужно показать термины с пояснениями, то подходит список определений — <dl>. А если просто перечислить элементы — в любом порядке или по шагам — лучше использовать списки <ul> и <ol>.

Тег <ul> — неупорядоченный список (unordered list)

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

Каждый элемент помещается в тег <li>, а браузер отображает их с маркерами — кругами, точками, тире или другим стилем. Одним словом, это обыкновенный маркированный список.

<ul>
  <li>Яблоко</li>
  <li>Банан</li>
  <li>Апельсин</li>
</ul>

Выглядит это так:

Тег <ol> — упорядоченный список (ordered list)

Это нумерованный список. Тег <ol> используется, когда важен порядок элементов (шаги инструкции, рейтинги и так далее). Элементы списка также заключаются в теги <li> и отображаются цифрами с точкой.

<h3>Как установить приложение</h3>
<ol>
  <li>Перейдите на официальный сайт.</li>
  <li>Скачайте установочный файл для вашей операционной системы.</li>
  <li>Запустите установку и следуйте инструкциям мастера.</li>
  <li>После установки откройте приложение и выполните вход.</li>
</ol>

Выглядит он так:

Как оформить список определений с помощью CSS

Чтобы список выглядел аккуратнее и было легче его читать, можно оформить его с помощью CSS.

Для примера создадим список <dl>:

HTML

<dl>
  <dt>HTML</dt>
  <dd>Язык разметки для создания веб-страниц.</dd>

  <dt>CSS</dt>
  <dd>Используется для оформления HTML-документов.</dd>
</dl>

И будем менять его CSS-оформление.

Базовое оформление

CSS

dl {
  margin: 1.5em 0;
}

dt {
  font-weight: bold;
  margin-top: 1em;
}

dd {
  margin-left: 1.5em;
  color: #555;
}

Вариант с рамкой и фоном

CSS

dl {
  border: 1px solid #ccc;
  padding: 1em;
  background-color: #f9f9f9;
  border-radius: 8px;
}

dt {
  font-weight: bold;
  color: #222;
  margin-top: 1em;
}

dd {
  margin-left: 1em;
  color: #555;
}

Вариант с сеткой (для колонок)

CSS

dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  row-gap: 0.5em;
  column-gap: 1em;
}

dt {
  font-weight: bold;
  text-align: right;
}

dd {
  margin: 0;
}

Советы

Убирайте margin у <dd>, если используете grid или flex.
Используйте :first-of-type, :last-of-type, :nth-of-type() для точечной стилизации терминов при необходимости, например:

HTML:

<dl>
  <dt>HTML</dt>
  <dd>Язык разметки для веб-страниц.</dd>

  <dt>CSS</dt>
  <dd>Язык стилей для оформления HTML.</dd>

  <dt>JavaScript</dt>
  <dd>Добавляет интерактивность на страницы.</dd>
</dl>

CSS:

/* Стилизуем первый термин */
dt:first-of-type {
  color: darkred;
  text-transform: uppercase;
}

/* Стилизуем последнее описание */
dd:last-of-type {
  font-style: italic;
  color: #444;
}

/* Стилизуем второй термин */
dt:nth-of-type(2) {
  background-color: #e0f7fa;
  padding: 0.2em 0.5em;
  border-radius: 4px;
}

/* Стилизуем каждое нечётное описание */
dd:nth-of-type(odd) {
  background-color: #f9f9f9;
  padding-left: 1em;
  border-left: 3px solid #ccc;
}

Что делает каждая строка:

dt:first-of-type стилизует первый <dt>;
dd:last-of-type стилизует последний <dd>;
dt:nth-of-type(2) стилизует второй <dt>;
dd:nth-of-type(odd) стилизует каждое нечётное <dd>.

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

Списки определений (<dl>, <dt>, <dd>) отражаются корректно во всех современных браузерах — Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera:

<dl> отображается как блочный элемент;
<dt> обычно выделяется жирным шрифтом;
<dd> имеет отступ слева, чтобы показать, что это описание;
браузеры не вставляют маркеры, как это делают для <ul> или <ol>.

На мобильных устройствах есть особенности: на экранах шириной до 600px отступы <dd> кажутся слишком большими, а длинные строки в <dd> не помещаются по ширине — особенно в характеристиках товаров или технических таблицах.

Список определений для мобильных устройств можно адаптировать так:

@media (max-width: 600px) {
  dl {
    grid-template-columns: 1fr;
  }

  dt {
    font-weight: bold;
    margin-top: 12px;
  }

  dd {
    margin: 0 0 10px 0;
  }
}

Здесь:

grid-template-columns: 1fr;
Переводит структуру в одну колонку, чтобы термин и описание шли друг за другом по вертикали. На узких экранах не будет сломанных строк и горизонтального скролла.
dt { font-weight: bold; margin-top: 12px; }
Подчёркивает термин (<dt>) жирным и даёт верхний отступ, чтобы визуально отделить блоки.
dd { margin: 0 0 10px 0; }
Добавляет отступ снизу у описания — улучшает читаемость между парами термин — описание.

Ошибки при работе со списками определений

Вот часто встречающиеся ошибки при работе со списками определений в HTML. Такой код теряет семантику: поисковики, скринридеры и другие инструменты не понимают структуру как «термин — описание».

Использование неправильных тегов

Вместо семантических <dl>, <dt>, <dd> применяются <div>, <ul>, <li> или другие универсальные элементы:

<div><b>HTML:</b> Язык разметки</div>

Правильно:

<dl>
  <dt>HTML</dt>
  <dd>Язык разметки</dd>
</dl>

Применение стилей вместо семантики

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

<p><strong>HTML:</strong> Язык гипертекстовой разметки</p>
<p><strong>CSS:</strong> Таблицы каскадных стилей</p>
<p><strong>JavaScript:</strong> Язык программирования для веба</p>

Здесь используются теги <p> и <strong> для визуального выделения, но это не список определений.

Правильно будет так:

<dl>
  <dt>HTML</dt>
  <dd>Язык гипертекстовой разметки</dd>

  <dt>CSS</dt>
  <dd>Таблицы каскадных стилей</dd>

  <dt>JavaScript</dt>
  <dd>Язык программирования для веба</dd>
</dl>