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>