Тег <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-документах.

Атрибуты

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

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