КодSEOБлогИное

<dl>, <dt>, <dd>

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

<dl>
  <dt>ключ
  <dd>значение
</dl>
<dl>
  <dt>Режиссёр
  <dd>Семён Туманов
  <dt>В главных ролях
  <dd>Юрий Никулин
  <dd>Алла Ларионова
  <dd>Юрий Белов
  <dd>Лев Дуров
  <dd>Владимир Емельянов
</dl>
<dl>
  <dt>Нужен ли закрывающий тег dt и dd?</dt>
  <dd>Он может присутствовать, но не обязателен.</dd>
  <dt>Что лучше использовать: таблицу table, список dl или ни то ни другое как в этой форме?
  <dd>
  <dt>Может ли у dt не быть пары dd?
  <dt>Можно ли использовать пустой dd?
  <dd>У dt или dd может отсутствовать содержимое, но нельзя писать dt без dd. Разрешено, чтобы у одного dt было несколько dd, как в образце выше, где перечислены актёры главных ролей. Также допускается, чтобы несколько dt имели общий dd, как в текущем примере, где на пару вопросов дан один ответ.
</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>
Все комментарии