Simon Willison — один из самых цитируемых наблюдателей за пересечением веба и AI — опубликовал короткую, но ёмкую заметку о HTML-элементе <dl>. На первый взгляд скучно. На второй — это диагноз: если даже опытные разработчики не знают базовой семантики, то AI-инструменты, обученные на их коде, воспроизводят те же ошибки в промышленных масштабах.
Контекст
Элемент <dl> (description list) существует в HTML с самых ранних версий. Долгие годы его называли «definition list» — список определений. В черновике HTML5 ещё в 2008 году его переименовали в «description list», расширив сценарии применения: метаданные, FAQ, глоссарии, атрибуты продукта, структурированные пары ключ–значение. Но большинство разработчиков по-прежнему воспринимают его как узкоспециализированный инструмент и редко используют.
Разбор опубликован со ссылкой на статью Бена Мейера. Выявленные факты: <dt> может предшествовать нескольким <dd> одновременно; пары <dt>/<dd> можно оборачивать в <div> для стилизации (но только в <div>, не в <section> или <p>); список целиком поддаётся ARIA-разметке через aria-labelledby. Эдриан Розелли дополнительно задокументировал, как скринридеры читают эти структуры — с заметными различиями между браузерами.
Willison ведёт один из самых внимательных публичных дневников о LLM-инструментах и веб-разработке. То, что он счёл нужным это отметить — сигнал: семантика HTML снова в фокусе, и не случайно.
Аналитика
Связь с AI прямая. Большинство современных LLM — Claude, GPT-4o, Gemini — обучены на гигантских корпусах веб-кода. Если в этом корпусе <dl> годами применялся неправильно или игнорировался, модели воспроизводят ту же практику. Когда разработчик просит сгенерировать «список характеристик продукта» или «FAQ», AI почти наверняка вернёт <ul>/<li> или вообще таблицу — но не семантически корректный <dl>.
Это важно не только ради «правильности». RAG-системы, агенты и парсеры, которые обходят веб-страницы для извлечения данных, опираются на семантику HTML. Правильно размеченный <dl> с ARIA-атрибутами — это структурированные данные, которые агент может надёжно извлечь без дополнительного промпта. Неправильная разметка — это дополнительный слой неопределённости, который агент должен преодолевать эвристиками.
Шире: по мере того как AI-агенты всё активнее парсят и генерируют HTML, качество семантической разметки становится инфраструктурным вопросом. Плохая семантика — технический долг, который AI не исправит сам по себе. Он его умножит.
Кейсы применения в бизнесе
B2B-SaaS стартап: если у вас в продукте есть карточки сравнения тарифов, страницы характеристик, или FAQ-разделы — перепроверьте разметку. Семантически правильный <dl> с ARIA улучшает доступность, а значит и охват аудитории с assistive technology. Если вы используете AI-копирайтер или AI-страница-билдер — добавьте в системный промпт явное требование использовать <dl> для пар ключ–значение.
Корпорация с legacy: в больших CMS-системах (особенно WordPress, Bitrix, 1С-Битрикс) шаблоны десятилетиями генерировали «технические характеристики» через <table> или <ul>. Если компания внедряет RAG поверх сайта — семантическая аудит разметки окупится: агент точнее извлечёт структурированные данные без дополнительного промп-инжиниринга.
SMB и локальный бизнес в КР/СНГ: для интернет-магазинов, которые генерируют карточки товаров через AI-инструменты, стоит один раз обновить шаблон промпта. Вместо «сделай список характеристик» — «сделай <dl> с <dt> для названия параметра и <dd> для значения». Это не сложнее, но даёт корректный HTML сразу, а не после ручной правки.
Кейсы в личной жизни
Разработчик: в следующий раз, когда попросите Claude или GPT сгенерировать компонент с метаданными, явно укажите: «используй семантический <dl>». Проверьте, справится ли модель с несколькими <dd> на один <dt>. Это быстрый тест качества AI-ассистента по части семантики.
Контент-мейкер и фрилансер: если вы сдаёте HTML-шаблоны клиентам или используете AI для генерации лендингов — добавьте в свой набор промптов блок о семантической разметке. Это выделяет работу на фоне «стандартного AI-вывода» и снижает правки.
Студент веб-разработки: <dl> — один из тех элементов, которые почти не разбирают на курсах, но спрашивают на собеседованиях в компании, которые следят за стандартами. Прочитайте документацию MDN по <dl> — 15 минут, которые окупятся.
Как применить сегодня
- Откройте любой свой проект и найдите места, где пары «термин — значение» (характеристики, FAQ, атрибуты) размечены через <ul> или <table> — замените на <dl>.
- В промпте к AI-ассистенту для генерации HTML добавьте: «для списков типа ключ–значение используй <dl><dt><dd>, при необходимости оборачивай пары в <div>».
- Если строите RAG-систему поверх веб-страниц, добавьте в парсер отдельную обработку <dl>-структур — это даст чистые пары для векторной базы без дополнительной эвристики.
- Проверьте ARIA-поддержку:
aria-labelledbyна <dl> позволяет скринридерам объявить заголовок списка — важно для accessibility-аудита. - Прочитайте заметку Эдриана Розелли о поддержке <dl> в скринридерах — она задокументирует расхождения между браузерами, о которых вы, возможно, не знали.