Элемент <dl> (description list) в HTML несправедливо обходят вниманием. Он нужен для разметки списка пар «имя — значение». Это частый UI-паттерн, и он невероятно гибкий: от списка удобств в отеле до расшифровки платежей за аренду или глоссария терминов. Анатомия простая: есть три элемента — <dl> (сам список), <dt> (description term, имя) и <dd> (description detail, значение). Один <dt> может содержать несколько <dd>, если у термина много значений (например, несколько авторов книги). Для удобства стилизации спецификации разрешают оборачивать связку <dt> и <dd> в <div>. Это единственный разрешённый элемент-обёртка.
Зачем вообще нужна семантика? Раньше такие списки верстали вложенными <div> с классами вроде book-details--label. Информация есть, но браузер не понимает структуру. Если компьютер сможет распознать список пар «имя — значение», пользователи скринридеров получат реальные преимущества: программа зачитает, сколько пар в списке, на какой позиции находится пользователь, и позволит перескочить весь блок целиком, если он неинтересен. Без <dl> каждая пара — просто разрозненный текст. Поддержка <dl> в скринридерах не идеальна, но польза от правильной разметки ощутима уже сейчас.
Самый наглядный пример — статблоки из Dungeons & Dragons. Это сплошные пары «имя — значение». Автор насчитал пять подходящих списков: базовые характеристики (Armor Class, Hit Points, Speed), очки способностей (STR, DEX, CON и так далее), владения (Senses, Languages, Challenge), особенности (Sunlight Sensitivity, Pack Tactics) и атаки (Dagger, Sling). Каждый список помечен aria-label или aria-labelledby для доступности. Пример отлично показывает, насколько разными могут быть пары, но <dl> подходит для всех.
Вывод: пары «имя — значение» — частый и гибкий паттерн в вебе. HTML размечает их тремя элементами: <dl>, <dt> и <dd>. Семантика даёт устройствам пользователей информацию для создания удобного опыта. Подробнее — в MDN или в спецификациях.