Список определений HTML dl - dl dt dd практическое руководство

Введение

Список определений в HTML — это семантическая структура, которая помогает описывать пары «термин – определение». За него отвечает тег <dl> (description list). Вместе с ним обычно используются теги <dt> (description term) и <dd> (description details или description definition).

Смотрите, я покажу вам, как он устроен на практике:

<dl>
  <dt>HTML</dt> <!-- Термин -->
  <dd>Язык разметки гипертекста</dd> <!-- Определение -->

  <dt>CSS</dt>
  <dd>Язык описания внешнего вида документа</dd>
</dl>

Такая структура сразу подсказывает браузеру, поисковым системам и средствам доступности, что это не просто список, а именно набор терминов с их пояснениями. Для технической документации, глоссариев, FAQ-блоков и описаний параметров это часто более правильный выбор, чем обычные <ul> или <ol>.

Теперь давайте по шагам разберем, как использовать <dl>, какие есть особенности, вариации, подводные камни и как все это аккуратно стилизовать.

Базовый синтаксис и структура <dl>

Что такое <dl>, <dt> и <dd>

Тег <dl> — это контейнер, внутри которого располагаются:

• <dt> — элемент термина (description term)
• <dd> — элемент описания/определения (description details/definition)

Минимальная корректная структура выглядит так:

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

Комментарии в этом примере:

<dl> <!-- Начало списка определений -->
  <dt>API</dt> <!-- Здесь мы объявляем термин -->
  <dd>Набор правил и спецификаций для взаимодействия программ</dd> <!-- Здесь идет пояснение -->
</dl> <!-- Конец списка определений -->

Важно понимать, что <dl> — это не обычный список с маркерами. Он отражает логическую связь между элементами: какой текст является термином, а какой — его пояснением.

Разрешенные дочерние элементы <dl>

Исторически внутри <dl> разрешались только <dt> и <dd>. Позже спецификация HTML5 допустила более гибкую структуру, но на практике, чтобы не запутаться, лучше придерживаться простого правила:

• в <dl> используем только <dt>, <dd> и при необходимости <div>-обертки.

Пример с группировкой через <div>:

<dl>
  <div>
    <dt>HTTP</dt>
    <dd>Протокол передачи гипертекста</dd>
  </div>

  <div>
    <dt>HTTPS</dt>
    <dd>Расширение протокола HTTP с поддержкой шифрования</dd>
  </div>
</dl>

<!-- Здесь div выступает как группа термина и определения -->
<dl>
  <div> <!-- Группа 1 -->
    <dt>GET</dt> <!-- Название метода -->
    <dd>Метод запроса данных с сервера</dd> <!-- Краткое объяснение -->
  </div>
  <div> <!-- Группа 2 -->
    <dt>POST</dt>
    <dd>Метод отправки данных на сервер</dd>
  </div>
</dl>

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

Соотношение <dt> и <dd>

Один термин — одно определение

Самый частый и понятный вариант:

<dl>
  <dt>REST</dt>
  <dd>Архитектурный стиль для взаимодействия распределенных систем</dd>
</dl>

<!-- Структура один к одному -->
<dl>
  <dt>JSON</dt> <!-- Один термин -->
  <dd>Формат обмена данными на основе текста</dd> <!-- Одно определение -->
</dl>

Такой формат лучше всего читается как человеком, так и скринридерами.

Один термин — несколько определений

Иногда один термин нужно раскрыть с разных сторон. Тогда используется несколько <dd> подряд после одного <dt>:

<dl>
  <dt>Кэш</dt>
  <dd>Буфер для временного хранения данных</dd>
  <dd>Механизм ускорения доступа к часто используемой информации</dd>
</dl>

<!-- Здесь мы указываем два определения для одного термина -->
<dl>
  <dt>Модуль</dt>
  <dd>Часть программы с четко определенной функциональностью</dd>
  <dd>Единица повторного использования кода в проекте</dd>
</dl>

Браузер и средства доступности рассматривают оба <dd> как относящиеся к одному <dt>.

Несколько терминов — одно определение

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

<dl>
  <dt>UI</dt>
  <dt>Пользовательский интерфейс</dt>
  <dd>Графическая или текстовая часть системы, с которой взаимодействует пользователь</dd>
</dl>

<!-- Здесь мы задаем два синонимичных термина -->
<dl>
  <dt>Bug</dt> <!-- Первый термин -->
  <dt>Дефект</dt> <!-- Синоним -->
  <dd>Ошибка в программе которая приводит к некорректному поведению</dd> <!-- Общее определение -->
</dl>

Такой прием полезен, когда есть аббревиатура и ее расшифровка, либо русское и английское название.

Типичные сценарии использования <dl>

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

Самый очевидный случай — технические глоссарии.

<section>
  <h2>Глоссарий терминов</h2>
  <dl>
    <dt>Refactoring</dt>
    <dd>Процесс изменения внутренней структуры кода без изменения внешнего поведения</dd>

    <dt>Deploy</dt>
    <dd>Процесс выкатывания приложения на сервер или рабочую среду</dd>
  </dl>
</section>

<!-- Здесь раздел с глоссарием оформлен семантически правильно -->
<section>
  <h2>Основные понятия</h2>
  <dl>
    <dt>Коммит</dt>
    <dd>Фиксация изменений в системе контроля версий</dd>

    <dt>Merge</dt>
    <dd>Объединение изменений из одной ветки в другую</dd>
  </dl>
</section>

Такая структура хорошо индексируется и логично озвучивается скринридерами.

FAQ и списки вопросов–ответов

Многие делают FAQ через <ul> или просто заголовки и параграфы. Список определений для этого подходит даже лучше, потому что «вопрос» можно считать термином, а «ответ» — определением.

<section>
  <h2>FAQ</h2>
  <dl>
    <dt>Нужно ли подключать дополнительные стили для dl</dt>
    <dd>Нет но по умолчанию браузер показывает их довольно просто так что стили часто добавляют вручную</dd>

    <dt>Можно ли вкладывать dl в другие элементы</dt>
    <dd>Да тег dl можно использовать практически в любом месте где разрешен блочный контент</dd>
  </dl>
</section>

<!-- Здесь вопрос оформлен как dt а ответ как dd -->
<dl>
  <dt>Как передавать данные через GET запрос</dt>
  <dd>Параметры передаются в строке запроса после знака вопроса разделяясь амперсандом</dd>
</dl>

Если вам нужно оформить простой список вопросов и ответов, <dl> делает структуру более ясной.

Описание параметров и опций

В документации часто нужно описать параметры функций, конфигурационные опции или флаги командной строки. Для этого <dl> тоже подходит.

<section>
  <h2>Параметры CLI команды</h2>
  <dl>
    <dt>--port</dt>
    <dd>Порт на котором запускается сервер по умолчанию 8080</dd>

    <dt>--env</dt>
    <dd>Режим окружения например dev staging production</dd>
  </dl>
</section>

<!-- Здесь мы описываем параметры конфигурации сервиса -->
<dl>
  <dt>timeout</dt>
  <dd>Максимальное время ожидания ответа от сервиса в миллисекундах</dd>

  <dt>retries</dt>
  <dd>Количество повторных попыток при неудачном запросе</dd>
</dl>

Такой формат читается компактно и логично.

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

Еще один частый сценарий — описание полей формы на отдельной странице (например, в админке или документации к API):

<section>
  <h2>Описание полей формы регистрации</h2>
  <dl>
    <dt>Email</dt>
    <dd>Используется для входа в систему и восстановления пароля</dd>

    <dt>Пароль</dt>
    <dd>Должен содержать минимум 8 символов включая цифры и буквы</dd>
  </dl>
</section>

<!-- Здесь мы поясняем назначение каждого поля -->
<dl>
  <dt>username</dt>
  <dd>Уникальное имя пользователя отображаемое в профиле</dd>

  <dt>role</dt>
  <dd>Определяет уровень доступа пользователя к системе</dd>
</dl>

Вложенные элементы и сложное содержимое

Можно ли вкладывать другие теги в <dd>

Да, внутри <dd> может быть сложная структура, а не только простой текст. Вы можете использовать:

• параграфы <p>
• списки <ul>, <ol>
• заголовки <h3> и ниже (если это логически оправдано)
• блоки кода <pre><code> и прочее

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

<dl>
  <dt>REST API</dt>
  <dd>
    <p>Набор правил для взаимодействия клиент-сервер через HTTP.</p>
    <ul>
      <li>Использует стандартные HTTP методы</li>
      <li>Основан на ресурсах и их представлениях</li>
      <li>Часто возвращает данные в формате JSON</li>
    </ul>
  </dd>
</dl>

<!-- Здесь внутри dd мы используем параграф и список -->
<dl>
  <dt>Git workflow</dt>
  <dd>
    <p>Типичный рабочий процесс может выглядеть так.</p>
    <ol>
      <li>Создать новую ветку от main</li>
      <li>Сделать изменения и закоммитить их</li>
      <li>Создать pull request и пройти ревью</li>
      <li>Смержить ветку обратно в main</li>
    </ol>
  </dd>
</dl>

Главное — следить за читаемостью и не превращать <dd> в слишком перегруженный блок.

Вложенные <dl> внутри <dd>

Иногда одно определение требует дополнительного глоссария. Тогда вы можете вложить <dl> внутрь <dd>:

<dl>
  <dt>HTTP методы</dt>
  <dd>
    <p>Основные методы HTTP.</p>
    <dl>
      <dt>GET</dt>
      <dd>Получение данных</dd>

      <dt>POST</dt>
      <dd>Отправка данных на сервер</dd>
    </dl>
  </dd>
</dl>

<!-- Здесь внутри одного определения мы создаем дополнительный список определений -->
<dl>
  <dt>Реляционная база данных</dt>
  <dd>
    <p>База данных основанная на таблицах и связях между ними.</p>
    <dl>
      <dt>Таблица</dt>
      <dd>Набор строк с одинаковым набором столбцов</dd>

      <dt>Первичный ключ</dt>
      <dd>Уникальный идентификатор строки в таблице</dd>
    </dl>
  </dd>
</dl>

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

Семантика и доступность <dl>

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

Большинство современных скринридеров интерпретируют <dl> как «список описаний» (description list), а пары <dt>–<dd> — как связанные элементы.

• <dt> обычно объявляется как «термин»
• <dd> — как «описание»

Это значит, что:

• пользователю будет легче ориентироваться в глоссарии
• произношение будет более естественным, чем у последовательности обычных параграфов

Чтобы структура была максимально понятной:

• не вставляйте между <dt> и соответствующими <dd> посторонние элементы
• не разрывайте пары <dt>–<dd> лишними заголовками

Использование <dl> в сочетании с заголовками

Частая ошибка — пытаться заменить заголовки <h2>–<h6> на <dt>. Это разные сущности:

• заголовок — обозначает начало смыслового раздела
• термин в <dt> — часть списка определений

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

<section>
  <h2>Основные термины</h2> <!-- Заголовок раздела -->
  <dl>
    <dt>API</dt>
    <dd>Интерфейс для взаимодействия компонентов приложения</dd>
  </dl>
</section>

<!-- Здесь мы не смешиваем заголовки и термины -->
<section>
  <h2>Типы тестов</h2>
  <dl>
    <dt>Юнит тестирование</dt>
    <dd>Проверка отдельных модулей или функций в изоляции</dd>

    <dt>Интеграционное тестирование</dt>
    <dd>Проверка взаимодействия нескольких компонентов системы</dd>
  </dl>
</section>

Так структура документа останется логичной и для SEO, и для ассистивных технологий.

Дополнительные атрибуты и ARIA

С точки зрения доступности <dl> уже довольно семантичен. Чаще всего дополнительных атрибутов не требуется.

Иногда вы можете встретить использование ARIA-ролей role="definition" или role="term", но для стандартных <dt> и <dd> это обычно избыточно, браузеры и так знают их назначение.

Куда полезнее:

• следить за краткостью и ясностью терминов
• разбивать длинные объяснения в <dd> на абзацы
• использовать списки внутри <dd> вместо длинной «простыни» текста

Стилизация списков определений

По умолчанию <dl> практически не имеет отступов и маркеров, а <dt> и <dd> выглядят как обычные блоки. Вы почти всегда захотите добавить стили.

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

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

<dl class="glossary">
  <dt>API</dt>
  <dd>Интерфейс для взаимодействия компонентов приложения</dd>

  <dt>SDK</dt>
  <dd>Набор инструментов для разработки под конкретную платформу</dd>
</dl>

.glossary {
  margin: 1rem 0;           /* Внешние отступы вокруг списка */
}

.glossary dt {
  font-weight: 600;         /* Выделяем термины полужирным */
  margin-top: 0.75rem;      /* Отступ сверху для разделения терминов */
}

.glossary dd {
  margin: 0 0 0.5rem 1.5rem; /* Сдвигаем определение вправо и добавляем отступ снизу */
}

/* Здесь мы настраиваем базовый внешний вид списка определений */
.glossary {
  margin: 16px 0;              /* Отступы сверху и снизу */
}

.glossary dt {
  font-weight: bold;           /* Делаем термин более заметным */
  color: #222;                 /* Немного более темный цвет текста */
}

.glossary dd {
  margin-left: 20px;           /* Сдвигаем определение чтобы показать связь с термином */
  color: #555;                 /* Чуть более светлый текст для описания */
}

Так список сразу становится визуально понятным: слева термины, справа — их описания.

Компактный вид в две колонки

Часто хочется сделать так, чтобы термины были в левой колонке, а определения — в правой. Для этого удобно использовать CSS Grid.

<dl class="definitions">
  <dt>Host</dt>
  <dd>Имя или IP адрес сервера</dd>

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

  <dt>Protocol</dt>
  <dd>Сетевой протокол например HTTP HTTPS</dd>
</dl>

.definitions {
  display: grid;                        /* Включаем сетку */
  grid-template-columns: 150px 1fr;     /* Левая колонка фиксированной ширины правая — оставшееся место */
  row-gap: 0.5rem;                      /* Отступы между строками */
}

.definitions dt {
  font-weight: 600;                     /* Выделяем термин */
}

.definitions dd {
  margin: 0;                            /* Сбрасываем стандартные отступы браузера */
}

/* Здесь мы превращаем dl в таблице-подобный макет */
.definitions {
  display: grid;
  grid-template-columns: 160px 1fr;  /* Ширина колонки с терминами и с описаниями */
  column-gap: 16px;                  /* Отступ между колонками */
}

.definitions dt {
  font-weight: bold;                 /* Выделяем термины */
}

.definitions dd {
  margin: 0;                         /* Убираем лишние отступы */
}

Такой подход хорошо работает для описания настроек, опций и параметров.

Вертикальные разделители и линии

Для большего визуального разделения можно добавить рамки, фоны и разделители:

.definitions {
  border-top: 1px solid #ddd;        /* Линия сверху всего списка */
}

.definitions dt,
.definitions dd {
  padding: 0.5rem 0;                 /* Вертикальные отступы у каждой строки */
  border-bottom: 1px solid #eee;     /* Разделительная линия между строками */
}

/* Здесь мы добавляем разделители между парами термин-описание */
.definitions dt,
.definitions dd {
  padding: 8px 0;                       /* Отступы по вертикали */
  border-bottom: 1px solid #e0e0e0;     /* Серая линия под каждой строкой */
}

Можно еще добавить фон для четных или нечетных строк, как в таблице, но в этом случае вам уже может быть проще использовать <table> — смотрите по задаче.

Стилизация FAQ на <dl>

Покажу вам, как это реализовано на практике для блока вопрос–ответ:

<dl class="faq">
  <dt>Можно ли внутри dl использовать другие списки</dt>
  <dd>Да внутри dd можно размещать ul и ol если это помогает структурировать текст</dd>

  <dt>Поддерживают ли все браузеры тег dl</dt>
  <dd>Да тег dl поддерживается практически во всех браузерах включая старые версии</dd>
</dl>

.faq dt {
  font-weight: 600;                /* Вопрос делаем заметнее */
  cursor: default;                 /* Просто чтобы не казалось что это ссылка */
}

.faq dd {
  margin: 0 0 1rem 0;              /* Отступ только снизу для отделения ответов */
  padding-left: 1rem;              /* Легкий отступ слева */
  color: #444;
}

/* Здесь мы оформляем dl как простой FAQ блок */
.faq dt {
  font-weight: bold;           /* Вопрос выделяем жирным */
  margin-top: 12px;            /* Отступ сверху между вопросами */
}

.faq dd {
  margin-left: 12px;           /* Ответ чуть сдвигаем чтобы показать иерархию */
  margin-bottom: 8px;          /* Отступ после ответа */
}

Если нужно, можно добавить интерактивность через JavaScript (сворачивание/разворачивание ответов), но это уже отдельная тема.

Когда <dl> уместен, а когда лучше другой тег

Хорошие случаи для <dl>

Используйте <dl>, когда:

• у вас явно есть пары «термин–определение» или «ключ–значение»
• вы описываете параметры, опции, настройки
• вы делаете глоссарий или словарь
• вы оформляете FAQ и хотите семантически показать связь вопрос–ответ

Другими словами, когда логика данных — это соответствие одного текста другому.

Когда лучше <ul> или <ol>

Если элементы списка равноправны и между ними нет структуры «ключ–значение», лучше использовать:

• <ul> — для маркированных списков
• <ol> — для нумерованных

Например, список задач:

<ul>
  <li>Подготовить документацию</li>
  <li>Обновить тесты</li>
  <li>Задеплоить новую версию</li>
</ul>

<!-- Здесь у нас просто перечень действий значение пары ключ-значение отсутствует -->
<ul>
  <li>Установить зависимости</li>
  <li>Запустить миграции</li>
  <li>Собрать фронтенд</li>
</ul>

Здесь список определений не нужен, потому что нет терминов и их пояснений.

Когда оправдана <table>

Если вы отображаете табличные данные с несколькими колонками (например, список пользователей с полями «Имя», «Email», «Роль»), <table> будет естественным выбором.

Отличия:

• <dl> — для связок «термин–описание»
• <table> — для многомерных данных в строках и столбцах

Иногда <dl> пытаются использовать как замену таблицам ради семантики, но если данные реально табличные, таблица будет честнее.

Поддержка браузерами и особенности рендеринга

Поддержка <dl> в браузерах

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

• во всех современных браузерах (Chrome, Firefox, Safari, Edge)
• в старых версиях (даже Internet Explorer)

То есть можно спокойно использовать <dl> без полифиллов и особых технических ухищрений.

Стандартные стили по умолчанию

У разных браузеров немного различаются дефолтные стили. Как правило:

• <dl> имеет небольшой отступ сверху и снизу
• <dd> смещен вправо относительно <dt> (margin-left примерно 40px)

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

dl,
dt,
dd {
  margin: 0;             /* Сбрасываем отступы чтобы не зависеть от браузера */
  padding: 0;
}

/* Здесь мы приводим dl к "чистому" виду без стандартных отступов */
dl,
dt,
dd {
  margin: 0;
  padding: 0;
}

Дальше вы добавляете нужные отступы и оформление под свой дизайн.

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

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

Теперь вы увидите, как это выглядит в коде, если описывать параметры функции:

<section>
  <h2>Функция sendRequest</h2>
  <p>Отправляет HTTP запрос к указанному URL.</p>

  <h3>Параметры</h3>
  <dl class="params">
    <dt>url</dt>
    <dd>Адрес ресурса к которому выполняется запрос</dd>

    <dt>method</dt>
    <dd>HTTP метод по умолчанию GET</dd>

    <dt>body</dt>
    <dd>Тело запроса для методов POST PUT и PATCH</dd>
  </dl>
</section>

/* Здесь мы стилизуем список параметров функции */
.params {
  margin-top: 8px;              /* Небольшой отступ над списком */
}

.params dt {
  font-family: monospace;       /* Параметры выглядят как код */
  font-weight: 600;
}

.params dd {
  margin: 0 0 6px 16px;         /* Определения чуть сдвигаем вправо */
}

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

Описание REST эндпоинтов

Еще один практический пример — документация по REST API:

<section>
  <h2>Эндпоинт GET /users</h2>
  <p>Возвращает список пользователей.</p>

  <h3>Параметры запроса</h3>
  <dl class="definitions">
    <dt>page</dt>
    <dd>Номер страницы результатов по умолчанию 1</dd>

    <dt>limit</dt>
    <dd>Количество элементов на странице по умолчанию 20</dd>

    <dt>sort</dt>
    <dd>Поле для сортировки например name createdAt</dd>
  </dl>
</section>

/* Здесь мы используем грид чтобы структурировать параметры запроса */
.definitions {
  display: grid;
  grid-template-columns: 120px 1fr;  /* Параметр и его описание */
  column-gap: 12px;
  row-gap: 4px;
}

.definitions dt {
  font-family: monospace;
  font-weight: 500;
}

.definitions dd {
  margin: 0;
}

Такая структура хорошо масштабируется и смотрится аккуратно.

Технический глоссарий по разделам

Можно разбить глоссарий по тематическим блокам, каждый — своим <section> и <dl>:

<section>
  <h2>Термины по HTTP</h2>
  <dl>
    <dt>Status code</dt>
    <dd>Числовой код результата HTTP запроса</dd>

    <dt>Header</dt>
    <dd>Метаданные HTTP сообщения</dd>
  </dl>
</section>

<section>
  <h2>Термины по Git</h2>
  <dl>
    <dt>Branch</dt>
    <dd>Отдельная линия разработки в репозитории</dd>

    <dt>Tag</dt>
    <dd>Метка на конкретном коммите обычно используется для релизов</dd>
  </dl>
</section>

<!-- Здесь каждый раздел посвящен своей теме а dl описывает термины внутри нее -->
<section>
  <h2>Frontend</h2>
  <dl>
    <dt>SPA</dt>
    <dd>Одностраничное веб приложение которое работает без полной перезагрузки страниц</dd>
  </dl>
</section>

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

Так вы сохраняете иерархию документа и правильную семантику списков определений.

Заключение

Тег <dl> — это не просто «еще один список» в HTML. Он задает четкую семантику связей типа «термин–определение» или «ключ–значение», что особенно важно в технической документации, глоссариях, описаниях параметров и FAQ.

Ключевые моменты, которые стоит запомнить:

• <dl> используется вместе с <dt> и <dd>, где <dt> — термин, а <dd> — его определение.
• Один термин может иметь несколько определений, и наоборот — несколько терминов могут делить одно и то же определение.
• Внутри <dd> можно использовать сложную структуру: параграфы, списки, вложенные <dl>.
• <dl> хорошо поддерживается браузерами и дружелюбен к средствам доступности.
• Стилизация <dl> почти всегда нужна, но она несложна — достаточно задать отступы и при необходимости использовать CSS Grid.

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

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

1. Можно ли использовать внутри <dt> инлайновые теги например <code> или <strong>

Да можно. <dt> по сути контейнер для термина. Допустимо оборачивать часть текста в <code>, <strong>, <em> и другие инлайновые элементы. Важно не вставлять внутрь <dt> блочные элементы без необходимости чтобы не ломать компактность терминов.

2. Как сделать чтобы пара <dt>–<dd> была кликабельной целиком

Оборачивайте содержимое <dt> и <dd> в ссылку или используйте JavaScript обработчик на родительском контейнере. Например: добавить класс к <dl>, повесить click на dt и в обработчике открывать нужный URL или разворачивать скрытый блок. Старайтесь при этом не вкладывать <a> на уровень всего <dl>, лучше ограничиваться отдельными элементами.

3. Как правильно реализовать сворачиваемый FAQ на <dl>

Используйте структуру <dt> для заголовка вопроса и <dd> для ответа. Добавьте класс например is-collapsed к <dd> и прячьте его через display: none или max-height: 0. На клик по <dt> через JavaScript переключайте класс у соответствующего <dd>. Для связи можно использовать nextElementSibling если структура строго чередуется.

4. Что делать если нужно добавить иконку перед термином в <dt>

Иконку можно добавить с помощью псевдоэлемента ::before или включить в сам HTML как <span> или <svg> перед текстом. Например в CSS dt::before { content: "• "; } или использовать фоновое изображение. Главное — не нарушать читаемость текста и учитывать состояние для скринридеров если иконка несет смысловую нагрузку.

5. Как задать разную ширину колонки терминов в разных брейкпоинтах

Если вы используете CSS Grid для <dl>, настройте grid-template-columns через медиа-запросы. Например на десктопе grid-template-columns: 200px 1fr, а на мобильных grid-template-columns: 1fr и дополнительно сделать dt жирным чтобы визуально отделить от dd. Так список определений будет адаптивным без дублирования разметки.