Практика: один термин с несколькими пояснениями
Список описаний может связывать один термин с несколькими значениями или пояснениями. Такая структура полезна, когда сведения относятся к одному названию, но их не стоит сливать в длинный абзац.
Назначение
Список описаний может связывать один термин с несколькими значениями или пояснениями. Такая структура полезна, когда сведения относятся к одному названию, но их не стоит сливать в длинный абзац.
Как это работает
После dt разместите несколько dd до следующего термина. При необходимости группу можно обернуть в div. Оформление отделяет второе пояснение, но связь задаётся самим порядком элементов dl.
Пример
<style>.multi-description dt{font-weight:700;margin-top:1rem}.multi-description dd{margin:.4rem 0 .4rem 1rem;line-height:1.5}</style>
<dl class="multi-description"><div><dt>Учебный пример</dt><dd>Код предназначен для локальной проверки.</dd><dd>Серверная обработка в него не входит.</dd></div><div><dt>Самостоятельное задание</dt><dd>Измените пример и сравните результат.</dd></div></dl>Что должно получиться
Два первых пояснения относятся к одному термину, последнее — к следующему. У текста нет искусственных пустых заголовков, которые могли бы нарушить понимание структуры.
Граница применения и частая ошибка
Не используйте dl вместо любого списка только ради удобных отступов. Если перечисляются равноправные пункты без отношений «название — значение», подходят ul или ol. Не рассчитывайте, что все вспомогательные программы озвучат группировку совершенно одинаково.
Самостоятельная проверка
Добавьте третье пояснение к первому термину и проверьте структуру в DOM. Отключите стили и оцените порядок чтения. Затем попробуйте описать ту же информацию таблицей и выберите более простой подход.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.