Тег dd в HTML - полное описание и примеры использования

Введение

Тег dd в HTML представляет собой элемент описания внутри списка определений. Он используется только в паре с тегами dl (definition list – список определений) и dt (definition term – термин).

Если говорить проще, то dd – это блок, в котором вы описываете значение какого‑то термина, понятия, параметра или даже вопроса и ответа.

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

Что такое тег dd и его роль в HTML

Семантическое назначение dd

Тег dd (description/details) используется для описания или расшифровки того, что задано тегом dt.

Обычно структура выглядит так:

• dl — контейнер всего списка определений;
• dt — термин или "заголовок" определения;
• dd — описание, пояснение, расшифровка термина.

Смотрите, логика следующая:

• dt отвечает на вопрос "что именно?";
• dd отвечает на вопрос "что это значит?".

Семантически браузер и поисковые системы понимают, что:

• внутри dl находятся связанные между собой пары термин–описание;
• dd указывает, что этот текст — не просто параграф, а именно описание/определение.

Это помогает:

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

Базовый пример структуры dl–dt–dd

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

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

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

Здесь:

• dl определяет, что это список определений;
• каждый dt задает термин;
• каждый dd уточняет, что термин означает.

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

Допустимые родительские элементы

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

Корректно:

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

Некорректно:

<p>Список терминов:</p>
<dd>Это описание без dl и dt — так делать не стоит.</dd> <!-- Ошибка семантики -->

Браузер, скорее всего, все равно отобразит текст, но:

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

Множественные dd для одного dt

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

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

Стандарт HTML это позволяет: один dt может иметь несколько dd подряд.

<dl>
  <dt>REST</dt>
  <dd>Архитектурный стиль для проектирования сетевых приложений.</dd>
  <dd>Основан на использовании стандартных HTTP-методов и понятных URL.</dd>
  <dd>Часто применяется при создании веб-API.</dd>
</dl>

Здесь все три dd относятся к одному dt, и это корректная разметка.

Обратите внимание: нет необходимости повторять dt, если вы продолжаете описывать тот же термин.

Несколько dt перед dd

Бывают ситуации, когда разные термины разделяют одно описание. В HTML это тоже допустимо: несколько dt подряд, затем один или несколько dd.

<dl>
  <dt>UI</dt>
  <dt>User Interface</dt>
  <dd>Интерфейс пользователя - визуальная часть системы с которой взаимодействует человек.</dd>
</dl>

Здесь вы видите пример, когда:

• UI и User Interface — два варианта написания одного термина;
• оба dt разделяют одно описание в dd.

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

Содержимое внутри dd

Какие элементы можно размещать внутри dd

Тег dd является блочным элементом, а значит, внутри него можно размещать:

• текст;
• параграфы p;
• списки ul/ol;
• вложенные dl (иногда это полезно для сложных структур);
• таблицы;
• инлайн-элементы (strong, em, a и т.д.);
• любые другие разрешенные HTML-элементы.

Пример описания с параграфом и списком:

<dl>
  <dt>HTTP-код 404</dt>
  <dd>
    <p>Статусный код HTTP обозначающий что запрошенный ресурс не найден.</p>
    <ul>
      <li>Чаще всего возникает при неверном URL.</li>
      <li>Может быть результатом удаления страницы.</li>
      <li>Иногда используется для скрытия внутренней структуры сайта.</li>
    </ul>
  </dd>
</dl>

Здесь я размещаю пример, чтобы вам было проще понять, как можно комбинировать различные элементы внутри dd.

Допустимо ли использовать многострочный контент в dd

Да, внутри dd вы можете делать полноценные блоки контента.

Например, описание API‑метода:

<dl>
  <dt>GET /users</dt>
  <dd>
    <p>Возвращает список пользователей.</p>
    <h4>Параметры запроса</h4>
    <ul>
      <li><strong>page</strong> - номер страницы результатов.</li>
      <li><strong>limit</strong> - количество элементов на странице.</li>
    </ul>
    <h4>Ответ</h4>
    <p>Возвращает JSON-массив объектов пользователя.</p>
  </dd>
</dl>

Такой подход особенно удобен в документации, когда сам "термин" — это, например, endpoint, а dd — полноценное описание с параметрами, примерами и пояснениями.

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

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

Классическое применение dd — глоссарии.

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

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

Такой подход:

• делает HTML более структурированным;
• подчеркивает логическую связь термин–определение;
• помогает пользователям и поисковым системам легче "читать" документацию.

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

Еще один популярный сценарий — документирование параметров.

Давайте посмотрим, что происходит в следующем примере:

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

  <dt>retries</dt>
  <dd>Количество попыток повторить запрос при ошибке сети.</dd>

  <dt>headers</dt>
  <dd>Объект содержащий дополнительные HTTP-заголовки.</dd>
</dl>

Здесь dl–dt–dd используются как структурированный блок "параметр–описание".
Это намного нагляднее, чем просто список с тире.

FAQ (вопрос–ответ) в семантическом виде

Иногда разработчики используют dl/dt/dd для оформления FAQ:

<dl>
  <dt>Можно ли использовать тег dd без dt</dt>
  <dd>Нет - dd всегда должен идти после соответствующего ему dt в пределах одного dl.</dd>

  <dt>Поддерживается ли тег dd во всех браузерах</dt>
  <dd>Да - это базовый тег HTML и поддерживается всеми современными браузерами.</dd>
</dl>

Технически это корректно, потому что:

• dt играет роль "вопроса";
• dd — "ответа".

Однако, если речь идет именно о структурированном FAQ для поисковых систем, обычно используют JSON-LD и специальные разметки schema.org. Но для визуального и семантического оформления внутри страницы dt/dd тоже подходят.

Отображение dd по умолчанию и стилизация

Как браузеры отображают dd без стилей

По умолчанию большинство браузеров:

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

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

<dl>
  <dt>Сервер</dt>
  <dd>Компьютер или программа предоставляющая сервисы другим устройствам.</dd>

  <dt>Клиент</dt>
  <dd>Программа или устройство которое обращается к серверу за услугами.</dd>
</dl>

Если вы откроете этот код в браузере, то увидите, что:

• термины будут визуально выделены (чаще всего полужирным);
• описания будут смещены вправо и иметь блочный формат.

Базовые CSS-правила для dt и dd

Смотрите, я покажу вам, как это работает с точки зрения CSS. В стилях браузера обычная картина примерно такая:

dl {
  margin: 1em 0;         /* Отступы вокруг списка определений */
}

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

dd {
  margin-left: 40px;     /* Делаем отступ для описания */
}

Эти стили могут немного отличаться в разных браузерах, но логика схожа.

Кастомная стилизация dd

Вы можете полностью переопределить внешний вид dd. Например, сделать описание компактным и без отступов:

<style>
  dl {
    margin: 0;
  }

  dt {
    font-weight: bold;
  }

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

<dl>
  <dt>Token</dt>
  <dd>Строка используемая для аутентификации запросов к API.</dd>
</dl>

Или оформить список параметров в две колонки:

<style>
  dl.params {
    display: grid;                      /* Используем CSS Grid */
    grid-template-columns: 1fr 3fr;     /* Левая колонка уже правой */
    column-gap: 1rem;                   /* Расстояние между колонками */
  }

  dl.params dt {
    font-weight: bold;
  }

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

<dl class="params">
  <dt>host</dt>
  <dd>Доменное имя или IP-адрес сервера.</dd>

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

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

Обратите внимание, как этот фрагмент кода решает задачу отображения параметров в виде таблицы, но без использования самого тега table — только за счет dl, dt, dd и CSS Grid.

Семантика и доступность (a11y)

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

Скринридеры (например, NVDA, JAWS, VoiceOver) воспринимают dl, dt и dd как структуру "списка определений".

Чаще всего:

• при входе в dl скринридер сообщает, что это definition list;
• при чтении dt он обозначает, что это термин;
• при чтении dd — что это определение.

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

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

Рекомендации по доступности при работе с dd

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

1. Соблюдайте последовательность dt → dd.
   dd должен логически следовать за соответствующим dt.

2. Не вставляйте между dt и dd посторонние элементы, которые могли бы разорвать связь.
   Например, пустые div или элементы, не относящиеся к определению.

3. Не злоупотребляйте сложной вложенностью.
   Вложенные dl внутри dd допустимы, но постарайтесь, чтобы иерархия была понятной.

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

Сравнение dd с другими HTML-структурами

dd vs li внутри ul/ol

Иногда возникает вопрос — а нельзя ли просто использовать ul/li для перечисления "термин–описание"?

Технически можно, но семантически это другое:

• ul/ol — это просто список элементов;
• dl/dt/dd — это список определений, где есть явное разделение на "термин" и "описание".

Пример на ul/li:

<ul>
  <li><strong>HTTP</strong> - протокол передачи гипертекста.</li>
  <li><strong>FTP</strong> - протокол передачи файлов.</li>
</ul>

И тот же пример на dl/dt/dd:

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

  <dt>FTP</dt>
  <dd>Протокол передачи файлов.</dd>
</dl>

Во втором случае:

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

dd vs p и div

Использование p или div для описаний вместо dd — распространенный, но менее семантичный подход.

<!-- Менее семантично -->
<p><strong>Latency.</strong> Время задержки ответа системы.</p>

<!-- Более семантично -->
<dl>
  <dt>Latency</dt>
  <dd>Время задержки ответа системы.</dd>
</dl>

Когда вы используете dd:

• отношения "что" и "что это значит" фиксируются на уровне HTML;
• вам проще масштабировать структуру, если терминов становится много;
• вы лучше соответствуете стандартам семантической верстки.

Частые ошибки при использовании dd и как их избежать

Ошибка 1 – dd без dl или dt

Некоторые разработчики размещают dd отдельно или в неверном порядке:

<dd>Описание какого-то параметра.</dd> <!-- Нет dl и dt -->

Как следствие:

• браузер может "починить" разметку как-то по-своему;
• валидатор HTML укажет на ошибку;
• теряется семантика.

Как правильно:

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

Ошибка 2 – вставка других блоков между dt и dd

Пример проблемной разметки:

<dl>
  <dt>API Key</dt>
  <p>Текстовый абзац который случайно встал между dt и dd.</p> <!-- Лишний блок -->
  <dd>Секретный ключ используемый для доступа к API.</dd>
</dl>

Валидаторы и некоторые инструменты могут считать это некорректной структурой.

Лучше сделать так:

<dl>
  <dt>API Key</dt>
  <dd>
    <!-- Переносим дополнительный текст внутрь dd -->
    <p>Секретный ключ используемый для доступа к API.</p>
    <p>Не передавайте его третьим лицам.</p>
  </dd>
</dl>

Ошибка 3 – использование dl/dt/dd только ради визуального эффекта

Иногда dl/dt/dd используют не по назначению, а просто ради удобного отступа и жирного текста.

Например:

<dl>
  <dt>Заголовок блока</dt>
  <dd>Просто абзац текста без реального смысла "термин–определение".</dd>
</dl>

Если семантически это не "термин и его определение", то лучше использовать:

• обычные заголовки h2–h6;
• параграфы p;
• списки ul/ol.

Семантика важнее, чем небольшое удобство при стилизации.

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

Пример 1. Документация к API

Покажу вам, как это реализовано на практике в документации к API.

<h2>Параметры запроса</h2>
<dl class="params">
  <dt>query</dt>
  <dd>
    <p>Строка поиска по которой фильтруются результаты.</p>
    <p>Поддерживает простые логические операторы.</p>
  </dd>

  <dt>limit</dt>
  <dd>Максимальное количество объектов возвращаемых в одном ответе.</dd>

  <dt>offset</dt>
  <dd>Смещение от начала списка результатов.</dd>
</dl>

Комментарии к примеру:

• h2 задает заголовок секции;
• dl объединяет список параметров;
• каждый параметр — это dt;
• описания — dd, которые можно расширять несколькими параграфами.

Пример 2. Глоссарий в технической документации

<h2>Глоссарий терминов</h2>
<dl>
  <dt>Load Balancer</dt>
  <dd>
    <p>Компонент распределяющий входящий трафик между несколькими серверами.</p>
    <p>Помогает масштабировать систему и повышает отказоустойчивость.</p>
  </dd>

  <dt>Failover</dt>
  <dd>
    <p>Механизм автоматического переключения на резервный ресурс при отказе основного.</p>
  </dd>

  <dt>Throttling</dt>
  <dd>
    <p>Ограничение скорости или объема запросов чтобы избежать перегрузки системы.</p>
  </dd>
</dl>

Такой блок легко читается и глазами, и с точки зрения HTML-структуры.

Пример 3. Структура "свойство–значение" для компонента UI

Иногда dd удобно использовать для описания визуальных компонентов.

<h2>Свойства компонента Button</h2>
<dl>
  <dt>variant</dt>
  <dd>Определяет визуальный стиль кнопки - primary secondary ghost и т.п.</dd>

  <dt>size</dt>
  <dd>Размер кнопки - small medium large.</dd>

  <dt>disabled</dt>
  <dd>Логическое значение - если true кнопка неактивна и не реагирует на клики.</dd>
</dl>

Здесь каждый dt — имя свойства, а dd — его описание.

Резюме по использованию dd

Тег dd — это элемент описания, который:

• всегда используется внутри dl, в связке с dt;
• служит для семантического оформления пары "термин–определение";
• позволяет размещать сложные многострочные описания, включая списки, заголовки и другие блоки;
• улучшает доступность и машинную читаемость документации, глоссариев, справочных разделов и описаний параметров.

Основные практические рекомендации:

1. Используйте dd только там, где действительно есть логика "термин–описание".
2. Соблюдайте структуру: dl → dt → dd (с возможными повторениями dt или dd).
3. Размещайте внутри dd полноценный контент — от простых фраз до больших блоков.
4. Не забывайте про стили: по умолчанию dd имеет отступ, который вы можете настроить под дизайн проекта.
5. Следите за валидностью: не вставляйте dd вне dl и не разрывайте логическую пару dt–dd посторонними элементами.

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

Вопрос 1. Можно ли вкладывать один dl с dd внутрь другого dd

Да, можно. Это полезно когда вам нужно описать подтермины внутри основного определения. Например:

<dl>
  <dt>OAuth 2.0</dt>
  <dd>
    <p>Протокол авторизации.</p>
    <dl>
      <dt>Client</dt>
      <dd>Приложение запрашивающее доступ.</dd>
      <dt>Resource Owner</dt>
      <dd>Пользователь которому принадлежат данные.</dd>
    </dl>
  </dd>
</dl>

Главное — не злоупотреблять вложенностью и сохранять читаемость.

Вопрос 2. Как сделать чтобы dt и dd отображались в одной строке

Используйте display: grid или flex. Пример с flex:

dl.inline > div {
  display: flex;          /* Размещаем dt и dd в одной строке */
}
dl.inline dt {
  min-width: 120px;       /* Ширина колонки терминов */
  font-weight: bold;
}
dl.inline dd {
  margin: 0;              /* Убираем стандартный отступ */
}

<dl class="inline">
  <div>
    <dt>Host</dt>
    <dd>localhost</dd>
  </div>
  <div>
    <dt>Port</dt>
    <dd>8080</dd>
  </div>
</dl>

Вопрос 3. Можно ли добавить aria-атрибуты к dd для лучшей доступности

Да, dd поддерживает aria-атрибуты как обычный блочный элемент. Например, можно использовать aria-live для динамически обновляемых определений:

<dd id="status" aria-live="polite">
  Ожидание ответа сервера.
</dd>

Скринридер будет зачитывать изменения текста внутри этого dd.

Вопрос 4. Как валидаторы реагируют на dd без dt

HTML-валидаторы обычно помечают dd без связанного dt как ошибку структуры списка определений. Чтобы проверить, используйте сервисы типа W3C Validator. Если обнаружите dd вне dl или без dt — оберните в dl и добавьте соответствующий dt.

Вопрос 5. Можно ли стилизовать разные dd по-разному в одном dl

Да. Используйте классы или селекторы nth-of-type. Например:

<dl>
  <dt>Успех</dt>
  <dd class="success">Операция выполнена успешно.</dd>

  <dt>Ошибка</dt>
  <dd class="error">Произошла ошибка при выполнении операции.</dd>
</dl>

dd.success {
  color: green;           /* Стили для успешного состояния */
}
dd.error {
  color: red;             /* Стили для ошибочного состояния */
}