Перейти к содержимому

HTML-тег <dl>

Тег <dl> определяет список определений/описаний (подробнее см. списки HTML). Он используется вместе с тегами <dd> и <dt>. Тег <dl> создает список, тег <dt> задает термин, а тег <dd> задает описание этого термина.

Экраны дикторов (screen readers) озвучивают содержимое <dl> особым образом. Убедитесь, что содержимое каждого списка написано так, чтобы четко передавать его связь с другими элементами списка в группе.

Если вы используете микроданные или глобальные атрибуты и хотите применить их ко всей группе, может быть полезно обернуть каждую группу «имя-значение» в элемент <div>.

Не рекомендуется использовать элемент <dl> просто для создания отступа на странице. Это может исказить смысл списка определений.

Чтобы изменить отступ для термина описания, используйте свойство CSS margin.

Тег <dl> служит контейнером для тегов <dd> и <dt>.

Синтаксис

Тег <dl> является парным. Содержимое записывается между открывающим (<dl>) и закрывающим (</dl>) тегами.

Пример использования HTML-тега <dl>:

HTML-тег <dl>

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <dl>
      <dt>Hypertext</dt>
      <dd>A system of text pages that have cross-references.</dd>
      <dt>Hyperlink</dt>
      <dd>A part of a hypertext document that references another item.</dd>
    </dl>
  </body>
</html>

Результат

dl tag example

Атрибуты

Тег <dl> поддерживает глобальные атрибуты и атрибуты событий.

Как стилизовать HTML-тег <dl>

css
dl {
  margin: 0;
  padding: 0;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 20px;
}

Практика

Каково правильное использование HTML-тега <dl> согласно информации, предоставленной на w3docs.com?

Считаете ли это полезным?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.