Забытый <dl>: почему этот HTML-тег достоин вашего внимания

Признайтесь, когда вы в последний раз использовали <dl> в реальном проекте? Если ответ «никогда» — вы не одиноки. Этот тег для списков определений (definition lists) живет в тени <ul> и <ol>, как тот коллега, который молчит на всех митингах, но потом выдает гениальное решение. А зря: <dl> идеально подходит не только для глоссариев, но и для метаданных, пар «ключ-значение» и даже для микроразметки.

Что умеет <dl> и его дети <dt> и <dd>?

По стандарту <dl> группирует термин (<dt>) и его описание (<dd>). Можно сделать один термин с несколькими описаниями или наоборот. И да, вложенность тоже работает. Звучит скучно? А теперь представьте: вы верстаете карточку товара — характеристики идут парами «Название: Значение». <dl> справится с этим без лишних div-обёрток и кастомных классов. Семантика, доступность и чистота кода — вот что вы получаете.

Почему мы забыли про <dl>?

Виной всему, как обычно, хайп вокруг flexbox и grid. Когда у тебя есть молоток (CSS-сетки), всё начинает выглядеть как гвозди. Но давайте честно: сколько раз вы писали <div class="item"><span class="label">...</span><span class="value">...</span></div> только потому, что <dl> казался «неудобным»? На самом деле, <dl> — это как старый добрый велосипед: не модно, но надежно и без лишних деталей.

Как использовать <dl> в 2024 году?

Браузеры поддерживают его отлично, а screen reader’ы — обожают. Для SEO тоже плюс: поисковики лучше понимают структурированные данные. Вот простой пример:

<dl>
  <dt>Название</dt>
  <dd>Супер-пупер фреймворк</dd>
  <dt>Версия</dt>
  <dd>42.0.1</dd>
  <dt>Лицензия</dt>
  <dd>MIT</dd>
</dl>

Красиво, правда? А если нужно стилизовать — пара строчек CSS, и всё готово. Никаких лишних span или div.

Комментарий студии METABYTE: Мы тоже грешим любовью к div-супу, но <dl> — отличный кандидат для рефакторинга. Особенно когда заказчик просит «сделать красиво и семантично». Попробуйте — и, возможно, ваш следующий проект скажет вам спасибо.