<dl>, <dd>, <dt>

Теги <dl>, <dt> и <dd> используются для вёрстки списка описаний («dl» означает «description list»).

У тега <dl> есть встроенная роль list, у <dt> — term, а у <dd> — definition.

        
          
          <p>Животные героев «Гарри Поттера»</p><dl>  <dt>Букля</dt>  <dd>Полярная сова Гарри Поттера</dd>  <dt>Живоглот</dt>  <dd>Полукот Гермионы Грейнджер</dd>  <dt>Пушистик</dt>  <dd>Кролик Лаванды Браун</dd>  <dt>Нагайна</dt>  <dd>Змея Волан-де-Морта</dd></dl>
          <p>Животные героев «Гарри Поттера»</p>
<dl>
  <dt>Букля</dt>
  <dd>Полярная сова Гарри Поттера</dd>
  <dt>Живоглот</dt>
  <dd>Полукот Гермионы Грейнджер</dd>
  <dt>Пушистик</dt>
  <dd>Кролик Лаванды Браун</dd>
  <dt>Нагайна</dt>
  <dd>Змея Волан-де-Морта</dd>
</dl>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Иногда требуется сверстать не просто перечень элементов, а список терминов и их определений, либо просто список пар «ключ-значение». Семантически верно будет такие перечни верстать при помощи тегов <dl>, <dt>, <dd>.

Элемент <dl> аналогично элементам <ul> и <ol> является внешней обёрткой для элементов списка.

Элемент <dt> используется для вёрстки термина либо ключа в паре «ключ-значение». Как правило, следом за ним идёт либо ещё один тег <dt> (если есть необходимость сверстать несколько терминов с одним определением), либо тег <dd>.

Тегом <dd> верстается определение термина, либо значение в паре «ключ-значение». Следом за этим тегом может идти как ещё один тег <dd> (если у термина несколько определений), так и тег <dt> (следующий термин).

Классический вариант. Один термин — одно определение:

        
          
          <dl>  <dt>Blink</dt>  <dd>Движок в браузерах Chrome, Edge, Opera</dd>  <dt>Gecko</dt>  <dd>Движок в браузере Firefox</dd>  <dt>WebKit</dt>  <dd>Движок в браузере Apple Safari</dd></dl>
          <dl>
  <dt>Blink</dt>
  <dd>Движок в браузерах Chrome, Edge, Opera</dd>
  <dt>Gecko</dt>
  <dd>Движок в браузере Firefox</dd>
  <dt>WebKit</dt>
  <dd>Движок в браузере Apple Safari</dd>
</dl>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Несколько терминов с общим определением:

        
          
          <dl>  <dt>Firefox</dt>  <dt>Mozilla Firefox</dt>  <dt>FF</dt>  <dd>    Свободный браузер на движке Gecko,    разработкой и распространением которого    занимается Mozilla Corporation.  </dd></dl>
          <dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>FF</dt>
  <dd>
    Свободный браузер на движке Gecko,
    разработкой и распространением которого
    занимается Mozilla Corporation.
  </dd>
</dl>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Термин с несколькими определениями:

        
          
          <dl>  <dt>Chrome</dt>  <dd>Браузер, разрабатываемый компанией Google, вышел в 2008 году.</dd>  <dd>Элемент 6-й группы 4-го периода периодической системы.</dd></dl>
          <dl>
  <dt>Chrome</dt>
  <dd>Браузер, разрабатываемый компанией Google, вышел в 2008 году.</dd>
  <dd>Элемент 6-й группы 4-го периода периодической системы.</dd>
</dl>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Отображение метаданных (пар «ключ-значение»):

        
          
          <dl>  <dt>Имя</dt>  <dd>Гарри Джеймс Поттер</dd>  <dt>День рождения</dt>  <dd>31 июля 1980 года</dd>  <dt>Телосложение</dt>  <dd>худощавый, невысокого роста</dd>  <dt>Особые приметы</dt>  <dd>Носит круглые очки; шрам в виде молнии на лбу.</dd></dl>
          <dl>
  <dt>Имя</dt>
  <dd>Гарри Джеймс Поттер</dd>
  <dt>День рождения</dt>
  <dd>31 июля 1980 года</dd>
  <dt>Телосложение</dt>
  <dd>худощавый, невысокого роста</dd>
  <dt>Особые приметы</dt>
  <dd>Носит круглые очки; шрам в виде молнии на лбу.</dd>
</dl>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Скринридеры взаимодействуют с <dl> по-разному, и это не баг, а фича. Например, есть разница в том, как они считают количество вложенных терминов <dt>, и как пользователи перемещаются между всеми элементами внутри списка.

Не задавайте тегу <dl> явную роль term, чтобы исправить странности. Это плохо влияет на мобильный и десктопный VoiceOver.

💡 При вёрстке перечня метаданных (пар «ключ-значение») удобно разделитель вносить в псевдоэлемент, а не писать текстом рядом с каждым ключом:

        
          
          dt::after {  content: ': ';}
          dt::after {
  content: ': ';
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

💡 В отличие от списков <ul> и <ol>, группы терминов (<dt>) и описаний (<dd>) с недавних пор можно оборачивать в <div>.