Теги <dl>, <dt>, <dd>

HTML-элемент <dl> создаёт ассоциативный список из одного или нескольких элементов-терминов <dt>, сопровождаемого одним или более элементами-описаний <dd>. Закрывающиеся теги </dt> и </dd> могут присутствовать, но не обязательны.

<dl>
  <dt>ключ</dt>
  <dd>значение</dd>
</dl>

У одного <dt> может быть несколько </dd>, как в образце, где перечислены актёры главных ролей.

<dl>
  <dt>Режиссёр
  <dd>Семён Туманов
  <dt>В главных ролях
  <dd>Юрий Никулин
  <dd>Алла Ларионова
  <dd>Юрий Белов
  <dd>Лев Дуров
  <dd>Владимир Емельянов
</dl>

Несколько <dt> могут иметь общий <dd>, как в примере, где на пару вопросов дан один ответ.

<dl>
  <dt>Что такое FAQ?
  <dt>Как назвать FAQ по-русски?
  <dd>FAQ (англ. frequently asked questions) — страница с часто задаваемыми вопросами по какой-либо теме с ответами на них. На русскоязычных сайтах данный раздел называют «Часто задаваемые вопросы», «ЧВЗ», «ЧАВО» или более привычно «Справка».
</dl>

Пустой <dd>

У <dt> или <dd> может отсутствовать содержимое, но нельзя писать <dt> без <dd>.

<dl>
  <dt>Режиссёр
  <dd>
  <dt>В главных ролях
  <dd>Юрий Никулин
  <dd>Алла Ларионова
  <dd>Юрий Белов
  <dd>Лев Дуров
  <dd>Владимир Емельянов
</dl>

В пустом <dd> можно сделать поясняющую запись.

<style>
dd:empty::before {
  content: "Не найдено";
  color: darkgray;
}
</style>

<dl>
  <dt>Режиссёр
  <dd></dd>
  <dt>В главных ролях
  <dd>Юрий Никулин
  <dd>Алла Ларионова
  <dd>Юрий Белов
  <dd>Лев Дуров
  <dd>Владимир Емельянов
</dl>

Содержимое <dt> и <dd> на одной строке

<style>
dt,
dd {
  display: inline; /* поставить <dt> и <dd> друг за другом вплотную на общей линии */ 
  margin: 0;
}
dd::after { /* в конце каждого тега <dd> добавить разрыв строки (пояснение, автор идеи) */ 
  content: '\A';
  white-space: pre;
}
dt::after { /* двоеточие в конце <dt> */ 
  content: ':';
}
</style>

<dl>
  <dt>ID</dt>
  <dd>3896921
  <dt>Диагональ (дюйм)</dt>
  <dd>5,93
  <dt>Разрешение (пикс)</dt>
  <dd>2160 × 1080
  <dt>Фотокамера (Мп)</dt>
  <dd>16 + 2 (двойная)
  <dt>Процессор</dt>
  <dd>HiSilicon Kirin 659
</dl>

Два столбца CSS

Два столбца в паре «наименование — объект» можно сделать с помощью таблицы, flexbox, свойств float, position и columns. Но для <dl>, на мой взгляд, лучше всего подходит grid.

<style>
@supports (display: grid) {  /* если браузер поддерживает Гриды */ 
  @media (min-width: 14em) {  /* если окно браузера больше 14em */ 
    dl {
      display: grid;
      grid-template-columns: auto 1fr;  /* auto определяет ширину первой колонки, которая равна самому широкому элементу <dt> (auto можно заменить на fit-content(10em), если необходимо её ограничить) */ 
    }
    dt {
      min-width: 0;  /* более привычное поведение при переполнении */ 
    }
    dd {
      margin: 0 0 0 1em;
    }
  }
}
</style>

<dl>
  <dt>Яйца
  <dd>5 штук
  <dt>Сахарный песок
  <dd>1,5—2 стакана
  <dt>Масло сливочное (растопить)
  <dd>150—200 грамм
  <dt>Мука
  <dd>2 стакана (250—270 грамм)
  <dt>Какао
  <dd>2 столовой ложки
</dl>

<style>
@supports (display: grid) {
  @media (min-width: 14em) {
    dl {
      display: grid;
      grid-template-columns: minmax(min-content, 1fr) auto;  /* первый столбец растянуть по всей свободной ширине */ 
    }
    dt,
    dd {
      padding: .5em 0;
    }
    dt:not(:last-of-type),
    dd:not(:last-of-type) {
      border-bottom: 1px solid rgba(0,0,0,.12);
    }
    dd {
      margin: 0;
    }
  }
}
</style>

<dl>
  <dt>Год выпуска
  <dd>2011
  <dt>Пробег
  <dd>99 000 км
  <dt>Цвет
  <dd>Белый
  <dt>Двигатель
  <dd>2.0 л / 141 л.с. / Бензин
</dl>