Теги <dl>, <dt>, <dd>: термины и описания
Как оформить словарь или параметры объекта без искусственной таблицы.
Зачем нужен этот элемент
dl группирует названия и соответствующие им описания. Название помещается в dt, описание — в dd. Это удобно для словаря, характеристик проекта и пар «параметр — значение», когда полноценная матрица строк и столбцов не нужна.
У одного термина может быть несколько описаний, а одно описание может относиться к нескольким терминам. Старайтесь сохранять связь в исходном порядке. CSS может разместить пары в колонки, но смысл должен оставаться понятным и без оформления.
Синтаксис и пример
<dl>
<dt>HTML</dt><dd>Структура и смысл документа.</dd>
<dt>CSS</dt><dd>Правила оформления.</dd>
</dl>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| dl | Общая группа терминов и описаний. |
| dt | Название термина или параметра. |
| dd | Соответствующее описание или значение. |
Частая ошибка
Не создавайте отдельный dl для каждого короткого слова только ради стандартного отступа dd. Для обычного визуального отступа есть CSS.
Небольшая практика
Добавьте параметр «Кодировка» со значением UTF-8. Затем отключите стили и проверьте, читаются ли пары в правильной последовательности.
Разберите также <table>, <ul>: эти элементы пригодятся в том же интерфейсе.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.