Списки определений на веб-странице: когда нужны dl, dt и dd

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

<dl> задаёт контейнер для групп «название — значение». Внутри <dt> обозначает имя или тему группы, а следующий за ним <dd> — описание, определение либо значение. Например, в карточке публикации названием будет «Автор», а значением — имя автора; в словарной статье термином станет «Интерлиньяж», а значением — объяснение расстояния между базовыми линиями строк.

Слово «определение» в старом названии элемента иногда сбивает с толку: <dl> не обязан содержать только словарные термины. Стандарт HTML описывает его как перечень групп «имя — значение». Поэтому важен не видимый маркер, а смысловая пара: можно ли прочитать левую часть как вопрос «какой параметр?» или «что обозначает это название?» и получить справа соответствующий ответ.

Для простого словаря структура выглядит так:

<dl>
  <dt>Интерлиньяж</dt>
  <dd>Расстояние между базовыми линиями соседних строк.</dd>
</dl>

На странице посетитель увидит два текстовых фрагмента. Браузер может добавить отступ для <dd>, но это только начальное оформление. CSS отвечает за расположение, ширину колонок, интервалы и адаптацию к узкому экрану; HTML обозначает связь между названием и его пояснением.

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

Подходящие случаи:

В карточке гарнитуры можно сгруппировать семейство, начертания и набор знаков. Но сначала спросите себя, одинаково ли важны для пользователя все пары. Если он сравнивает несколько гарнитур по общим критериям, таблица может яснее показать пересечение строк и столбцов. Если же он просматривает сведения об одном объекте, список «параметр — значение» обычно легче читать по отдельным пунктам.

У этих вариантов разные задачи. Маркированный <ul> объединяет однородные элементы, между которыми нет отношения «название — значение». Нумерованный <ol> показывает последовательность или порядок. Таблица нужна, когда информация организована в строки и столбцы и читателю важно сопоставлять их пересечения. Абзацы и заголовки подходят для связного объяснения, которое развивается по мысли, а не по парам.

Быстрая проверка:

Представим страницу мероприятия. Дата, адрес, организатор и стоимость — отдельные поля с метками; их удобно показать как группы «название — значение». Программа из четырёх пунктов идёт в заданном порядке — это список шагов или расписание, а не набор определений. Если же страница сравнивает несколько сеансов по дате, залу и доступности мест, таблица может дать более точную структуру.

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

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

<dl>
  <dt>Формат веб-шрифта</dt>
  <dd>WOFF2</dd>
  <dd>Основной файл для подключения на сайте.</dd>
</dl>

Если посетитель может неверно решить, относится ли второй <dd> к этой метке или к следующей, упростите запись. Дайте каждой паре отдельный визуальный ритм, держите связанные элементы близко и создайте явный интервал перед следующей группой. При необходимости стандарт HTML разрешает обернуть группы в <div> внутри <dl>: это даёт удобную цель для сетки и отступов, не меняя смысл элементов.

<dl class="specs">
  <div class="specs__item">
    <dt>Начертания</dt>
    <dd>Обычное, полужирное</dd>
  </div>
  <div class="specs__item">
    <dt>Лицензия</dt>
    <dd>Для личного проекта</dd>
  </div>
</dl>

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

У списка определений нет единственного правильного макета. Для коротких значений подойдут две колонки: термин занимает устойчивую ширину, описание начинается на общей вертикали. Для длинных пояснений часто лучше вертикальный формат: метка над значением, а каждая пара становится отдельным компактным блоком. Третий вариант — список с разделителем между меткой и ответом; он полезен для метаданных, которые занимают одну строку.

.specs {
  display: grid;
  grid-template-columns: minmax(9rem, 0.7fr) minmax(0, 1.3fr);
  column-gap: 1.5rem;
  row-gap: 0.75rem;
  margin: 0;
}

.specs dt {
  font-weight: 600;
}

.specs dd {
  margin: 0;
}

@media (max-width: 36rem) {
  .specs {
    grid-template-columns: 1fr;
    row-gap: 0.25rem;
  }

  .specs dd {
    margin-bottom: 0.75rem;
  }
}

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

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

Сделайте метки заметными, но не конкурирующими с основным текстом. Полужирное начертание часто достаточно; крупный размер, цвет и капслок сразу для всех <dt> создают визуальную тяжесть. Сравните строку метки и значения при обычном масштабе и увеличении страницы. Между группами задайте интервал больше, чем внутри пары: так глаз считывает принадлежность по близости. Линии-разделители добавляйте только тогда, когда они помогают отделить записи и не дробят содержимое чрезмерно.

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

Сначала определите, какие сведения посетитель ищет быстро: имя семейства, доступные начертания, формат файла и язык лицензии. Если все эти сведения относятся к одной гарнитуре, можно разметить их как имя-значение. Содержание должно быть конкретным: вместо расплывчатого «Хорошая поддержка» укажите, какие именно наборы знаков или начертания проверены. Если факт неизвестен, не маскируйте отсутствие данных декоративным прочерком — покажите, что информация не указана, либо не выводите поле.

<dl class="font-meta">
  <div>
    <dt>Семейство</dt>
    <dd>Северный гротеск</dd>
  </div>
  <div>
    <dt>Начертания</dt>
    <dd>Обычное и полужирное</dd>
  </div>
  <div>
    <dt>Файлы</dt>
    <dd>WOFF2 и OTF</dd>
  </div>
</dl>

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

Если вы создаёте собственную гарнитуру, проверьте карточку с реальным названием и длинными описаниями. В Fontgenerator можно подготовить тестовый рукописный шрифт и посмотреть, как его имя и характеристики читаются в карточке сайта рядом с другими текстовыми стилями.

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

Считать `<dt>` заголовком секции. Термин обозначает имя группы, но не заменяет полноценный заголовок раздела. Для развёрнутых самостоятельных тем используйте заголовок и следующий за ним текст.

Оформить значения как таблицу только CSS-ом. Две колонки сами по себе не создают таблицу. Если нужно сравнение по нескольким общим критериям, используйте семантическую таблицу с заголовками столбцов и строк.

Оставить браузерный отступ `<dd>` и не проверить итог. Начальное отображение может не совпасть с макетом. Сбросьте ненужные отступы, задайте ритм явно и проверьте связность пары после адаптации.

Сверстать длинные описания в тесной колонке. Особенно плохо это заметно на экране средней ширины. Разрешите колонке переходить на одну ширину, а метке — располагаться сверху, когда места мало.

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

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

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

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

Да, HTML допускает группы, обёрнутые в <div> внутри списка. Это полезно для сетки и единых отступов отдельной записи. Внутри такой группы сохраняйте порядок: сначала один или несколько элементов <dt>, затем относящиеся к ним <dd>.

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

Обычно сначала используют элементы по их назначению и проверяют объявление структуры целевыми вспомогательными технологиями. Представление списков определений может различаться в разных программах чтения с экрана. Не добавляйте ARIA-роль механически: неверная роль способна изменить объявление, не сделав содержание понятнее.

<dl> полезен, когда страница действительно содержит пары «название — значение»: термин и пояснение, характеристику и её значение, метку и поле. Сначала выберите структуру по смыслу, затем настройте колонки, отступы и мобильную перестройку CSS-ом. Проверка длинных реальных значений покажет, остаётся ли каждая пара понятной вне макета.

Для теста текстовой иерархии можно создать собственный шрифт в Fontgenerator и оценить, как он работает в метках и значениях карточки.