Тег <dl>

Описание

Тег <dl> (от англ. "definition list") создает список терминов и их описаний. Состоит из пар <dt> (термин) и <dd> (определение).

Базовый список определений:
<dl> <dt>HTML</dt> <dd>Язык гипертекстовой разметки</dd> <dt>CSS</dt> <dd>Каскадные таблицы стилей</dd> </dl>
Несколько описаний для одного термина:
<dl> <dt>JavaScript</dt> <dd>Язык программирования</dd> <dd>Используется для создания интерактивных веб-страниц</dd> </dl>
Стилизация через CSS:
<style> dl { background: #f9f9f9; padding: 20px; border-radius: 8px; } dt { font-weight: bold; color: #0066cc; } dd { margin-left: 20px; padding: 5px 0; } </style> <dl> <dt>API</dt> <dd>Интерфейс программирования приложений</dd> </dl>

Ключевые особенности:

  • Семантический контейнер для пар "термин-определение"
  • Может содержать несколько <dd> для одного <dt>
  • По умолчанию <dd> имеет отступ слева
  • Поддерживает все глобальные атрибуты HTML
  • Важен для доступности и SEO

Рекомендации по использованию:

  • Используйте для глоссариев, словарей, FAQ
  • Не применяйте для чисто декоративных целей
  • Для сложных структур можно вкладывать другие HTML-элементы
  • Сочетайте с микроформатами для машинно-читаемых данных

Практические применения:

  • Создание словарей терминов
  • Оформление метаданных (автор, дата, параметры)
  • Построение спецификаций и документации
  • Организация вопросов и ответов

Тег <dl> обеспечивает семантически правильное отображение структурированных пар "термин-определение" в HTML-документах.

Атрибуты

class Задает один или несколько классов CSS для стилизации элемента
data-* Используется для хранения пользовательских данных в элементах
dir Определяет направление текста: слева направо (ltr) или справа налево (rtl)
hidden Скрывает элемент, делая его невидимым и недоступным для пользователя
id Уникальный идентификатор элемента в документе
lang Определяет язык содержимого элемента
style Позволяет задавать CSS-стили непосредственно в атрибуте элемента
title Задает всплывающую подсказку при наведении на элемент
translate Указывает, должен ли переводиться текст внутри элемента
compact Уменьшает отступы между элементами списка (устарел в HTML5)

Поддержка браузерами
3.0 1.0 2.0 1.0 1.0