HTML: Список определений dl

<dl> — это не «ещё один список», а способ показать пары «термин — значение». Его берут, когда нужно чётко сопоставить метку и данные.

Где это реально пригодится

• Характеристики товара. «Габариты: 200×150×30 мм», «Вес: 120 г». В карточках товаров так делают понятную спецификацию без таблиц.
• FAQ. Вопрос как термин, ответ как описание. Скринридеры читают это как связные пары, пользователю проще ориентироваться.
• Метаданные статьи. Автор, дата, время чтения, категория. Это удобно, если данные приходят из базы и выводятся в PHP-шаблоне.
• Профили и карточки. Поля «Город», «Роль», «Телефон» с их значениями.
• Глоссарий. Термин и его определение — идеальный кейс для <dl>.

Как правильно писать

Внутри <dl> должны быть только пары:

• <dt> — термин (короткая метка),
• <dd> — описание (значение или развёрнутый ответ).

Порядок строго такой: сначала <dt>, потом <dd>.

Пример характеристик:

<dl class="specs">
  <dt>Артикул</dt>
  <dd>ART-1024</dd>
 
  <dt>Габариты</dt>
  <dd>200×150×30 мм</dd>
 
  <dt>Вес</dt>
  <dd>120 г</dd>
</dl>

Пример FAQ:

<dl class="faq">
  <dt>Как оформить заказ?</dt>
  <dd>Добавьте товар в корзину и нажмите «Оформить».</dd>
 
  <dt>Есть ли доставка в регионы?</dt>
  <dd>Да, доставляем по всей стране.</dd>
</dl>

Пример метаданных статьи:

<dl class="article-meta">
  <dt>Автор</dt>
  <dd>Иван Иванов</dd>
 
  <dt>Дата публикации</dt>
  <dd>24.08.2024</dd>
 
  <dt>Время чтения</dt>
  <dd>7 минут</dd>
</dl>

Вариации, которые реально используют

• Несколько значений для одного термина. Например, список актёров:
  html

  <dl>
    <dt>Исполнители ролей</dt>
    <dd>Анна Соколова</dd>
    <dd>Игорь Николаев</dd>
    <dd>Елена Васильева</dd>
  </dl>

• Синонимы для одного значения. Например, «JS» и «JavaScript» ведут к одному описанию:
  html

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

Частые ошибки

• Использовать <dl> как обычный список. Если нет пар «метка — значение», лучше взять <ul> или <ol>.
• Ставить цифры или маркеры вручную. У <dl> нет нумерации и маркеров — это не список шагов.
• Нарушать порядок. Нельзя сначала <dd>, потом <dt>. Скринридер прочитает это как бессвязный текст.
• Делать <dt> слишком длинным. Термин должен быть коротким. Если текст длинный — это уже описание, его в <dd>.
• Оборачивать каждую пару в лишние <div>. Для стилизации достаточно классов на <dl>, <dt>, <dd>.

Под ваши задачи (PHP, админки, CMS)

Если характеристики или метаданные приходят из базы, шаблон получается простым и предсказуемым:

<dl class="product-specs">
  <?php if (!empty($product['article'])): ?>
    <dt>Артикул</dt>
    <dd><?= htmlspecialchars($product['article']) ?></dd>
  <?php endif; ?>
 
  <?php if (!empty($product['weight'])): ?>
    <dt>Вес</dt>
    <dd><?= htmlspecialchars($product['weight']) ?> г</dd>
  <?php endif; ?>
 
  <?php foreach ($extraSpecs as $label => $value): ?>
    <dt><?= htmlspecialchars($label) ?></dt>
    <dd><?= htmlspecialchars($value) ?></dd>
  <?php endforeach; ?>
</dl>

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

• сохраняет семантику;
• легко расширяется (добавили поле — вывели ещё одну пару);
• удобно стилизовать;
• корректно читается скринридерами.

Минимальный CSS

Простой вариант, чтобы пары читались:

.product-specs dt {
  font-weight: 700;
  margin-top: 10px;
}
 
.product-specs dd {
  margin: 0 0 6px 0;
}

Вариант с сеткой (термин слева, значение справа):

.product-specs {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px;
}
 
.product-specs dt {
  font-weight: 700;
}

На мобильных сетка обычно не нужна: пары идут друг за другом — так даже понятнее.