Теги <​dl​>, <​dt​>, <​dd​>: для чего нужны, как их использовать
2026-02-21 15:43 Diff
https://skillbox.ru/media/code/tegi-dl-dt-dd-dlya-chego-nuzhny-kak-ih-ispolzovat/

#статьи

  • 15 авг 2025
  • 0

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

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

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

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

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

Содержание:

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

  • <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>

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

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

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

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

Вывод:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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>

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

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

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

  • Помещать в <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>

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

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

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

  • 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>.

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

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

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

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

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

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

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

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

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

Чтобы список выглядел аккуратнее и было легче его читать, можно оформить его с помощью 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; }Скриншот: Google Chrome / Skillbox Media

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; }Скриншот: Google Chrome / Skillbox Media

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; }Скриншот: Google Chrome / Skillbox Media
  • Убирайте 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; }Скриншот: Google Chrome / Skillbox Media

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

  • 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> Курс с трудоустройством: «Профессия Фронтенд-разработчик + ИИ» Узнать о курсе