Списки определений HTML

Список определений HTML( <dl> ) — это способ представления ряда терминов и соответствующих им определений или описаний. В отличие от неупорядоченных( <ul> ) или упорядоченных( <ol> ) списков, списки определений специально разработаны для сопоставления терминов с определениями, что делает их идеальными для глоссариев, разделов часто задаваемых вопросов и технической документации.

В этом уроке по HTML мы изучим списки определений в HTML, объясним структуру, атрибуты, стили и варианты использования списков определений, а также приведем примеры, которые помогут вам эффективно интегрировать их в ваши веб-проекты.

Обзор списков можно найти в статье Списки HTML .

Что такое список определений HTML?

Список определений — это структурированный способ сопоставления терминов с их определениями. Он состоит из следующих элементов:

  • <dl> : Элемент-контейнер для списка определений.
  • <dt> : Представляет термин.
  • <dd> : Представляет описание или определение термина.

Вот базовый синтаксис списка определений: 

<dl>
  <dt>HTML</dt>
  <dd>A markup language for creating webpages.</dd>
  <dt>CSS</dt>
  <dd>A stylesheet language for styling webpages.</dd>
</dl>

Это будет выглядеть так:

Пример списка определений HTML

Атрибуты элементов <dl> , <dt> и <dd>

Элементы <dl> , <dt> и <dd> поддерживают общие глобальные атрибуты, такие как id , class и style . Эти атрибуты позволяют настраивать и стилизовать элементы.

1 Глобальные атрибуты

Глобальные атрибуты, такие как class , id и style можно использовать для применения определенных стилей или скриптов к элементам. 

<dl class="definition-list">
  <dt id="html">HTML</dt>
  <dd>A markup language for creating webpages.</dd>
</dl>

2 атрибута ARIA

Для повышения доступности можно добавить атрибуты ARIA(Accessible Rich Internet Applications). Например: 

<dl aria-label="Glossary">
  <dt>HTML</dt>
  <dd>A markup language for creating webpages.</dd>
</dl>

Стилизация списков определений с помощью CSS

Списки определений можно стилизовать в соответствии с вашими требованиями к дизайну. CSS можно использовать для настройки интервалов, выравнивания и других визуальных аспектов списка.

1 Термины и описания стиля

Вы можете стилизовать термины( <dt> ) и описания( <dd> ) по отдельности: 

<style>
  dt {
    font-weight: bold;
    margin-top: 10px;
  }

  dd {
    margin-left: 20px;
  }
</style>

<dl>
  <dt>HTML</dt>
  <dd>A markup language for creating webpages.</dd>
</dl>
Списки определений HTML — пример стилизации терминов и описаний

2. Настройка макета

Используйте CSS для создания пользовательских макетов, таких как размещение терминов и описаний бок о бок: 

<style>
  dl {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
  }

  dt {
    font-weight: bold;
  }

  dd {
    margin: 0;
  }
</style>

<dl>
  <dt>HTML</dt>
  <dd>A markup language for creating webpages.</dd>
  <dt>CSS</dt>
  <dd>A stylesheet language for styling webpages.</dd>
</dl>
Списки определений HTML — пример настройки макета

3. Добавление границ и фона

Сделайте свой список определений заметным, добавив границы или цвет фона: 

<style>
  dl {
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #f9f9f9;
  }

  dt {
    border-bottom: 1px solid #ddd;
    padding: 5px 0;
  }

  dd {
    padding: 5px 0 10px 10px;
  }
</style>

Вложенные списки определений

Списки определений могут быть вложенными, создавая сложные структуры. Например: 

<dl>
  <dt>Frontend Development</dt>
  <dd>
    <dl>
      <dt>HTML</dt>
      <dd>A markup language for creating webpages.</dd>
      <dt>CSS</dt>
      <dd>A stylesheet language for styling webpages.</dd>
    </dl>
  </dd>
</dl>

Вложенный <dl> создает иерархическую структуру для терминов и их подопределений.

Списки определений HTML — пример вложенных списков определений

Реальные примеры использования

  • Глоссарии: Дайте определение терминам и их значениям в структурированном формате.
  • Часто задаваемые вопросы: Сопоставьте вопросы с ответами на них.
  • Техническая документация: описание кода, инструментов или процессов.
  • Представление данных: отображайте пары «ключ-значение» в визуально привлекательном виде.

Вопросы доступности

Чтобы обеспечить доступность ваших списков определений:

  • Используйте семантические элементы( <dl> , <dt> , <dd> ) для объединения терминов и определений.
  • Укажите контекст для списка, используя заголовок или атрибуты ARIA.
  • Обеспечьте достаточные отступы и интервалы для удобства чтения.

Лучшие практики для списков определений

  • Соблюдайте краткость терминов: убедитесь, что термины( <dt> ) краткие и понятные.
  • Давайте понятные описания: делайте описания( <dd> ) информативными, но краткими.
  • Используйте правильную вложенность: для сложных данных вкладывайте списки логически.
  • Примените стили: используйте CSS, чтобы сделать список визуально привлекательным и удобным для чтения.

Заключение

Списки определений HTML — мощный инструмент для наглядного и структурированного отображения парных данных. Используя их гибкость, оформляя с помощью CSS и соблюдая стандарты доступности, вы можете создавать информативные и визуально привлекательные списки для самых разных приложений.