Списки определений (dl, dt, dd) [Модуль 5: Списки]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Списки определений в HTML используются для представления пар "термин-описание", таких как записи в словаре, глоссарии или метаданные. Этот тип списка создается с помощью трех основных тегов: `<dl>` (definition list), который является контейнером для всего списка, `<dt>` (definition term) для обозначения термина и `<dd>` (definition description) для его описания. Эти упражнения помогут вам на практике освоить создание и структурирование списков определений — от самых простых конструкций до более сложных, включающих несколько терминов или описаний.

Список тем

Создание базового списка определений

id: 37827_dl-01-basic-container

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

CSS

.glossary {
  font-family: sans-serif;
  background-color: #f4f4f9;
  border: 1px solid #dcdce6;
  border-radius: 8px;
  padding: 15px;
}

.glossary dt {
  font-weight: bold;
  color: #3b3b5a;
}

.glossary dd {
  margin-left: 20px;
  color: #555;
}

                     <input1 class="glossary">
  <dt>HTML</dt>
  <dd>Язык гипертекстовой разметки, используемый для создания веб-страниц.</dd>
</input1>

HTML

<input1 class="glossary">
  <dt>HTML</dt>
  <dd>Язык гипертекстовой разметки, используемый для создания веб-страниц.</dd>
</input1>

Для создания списка определений используется тег `<dl>` (Definition List). Он служит оберткой для всех терминов (`<dt>`) и их описаний (`<dd>`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Добавление термина и описания

id: 37827_dl-02-term-and-definition

Теперь, когда у вас есть контейнер, нужно правильно разметить сам термин и его описание. Используйте соответствующие теги для слова 'CSS' и его определения.

CSS

.glossary {
  font-family: sans-serif;
  background-color: #f4f4f9;
  border: 1px solid #dcdce6;
  border-radius: 8px;
  padding: 15px;
}

.glossary dt {
  font-weight: bold;
  color: #3b3b5a;
}

.glossary dd {
  margin-left: 20px;
  color: #555;
}

                     <dl class="glossary">
  <input1>CSS</input1>
  <input2>Каскадные таблицы стилей, используемые для оформления веб-страниц.</input2>
</dl>

HTML

<dl class="glossary">
  <input1>CSS</input1>
  <input2>Каскадные таблицы стилей, используемые для оформления веб-страниц.</input2>
</dl>

Внутри `<dl>` каждый термин оборачивается в тег `<dt>` (Definition Term), а его описание — в тег `<dd>` (Definition Description).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Список с несколькими элементами

id: 37827_dl-03-multiple-items

Списки определений могут содержать множество пар "термин-описание". Добавьте вторую пару для термина 'JavaScript', используя уже изученные теги.

CSS

.glossary {
  font-family: sans-serif;
  background-color: #f4f4f9;
  border: 1px solid #dcdce6;
  border-radius: 8px;
  padding: 15px;
}

.glossary dt {
  font-weight: bold;
  color: #3b3b5a;
  margin-top: 10px;
}

.glossary dd {
  margin-left: 20px;
  color: #555;
}

                     <dl class="glossary">
  <dt>HTML</dt>
  <dd>Язык гипертекстовой разметки.</dd>

  <input1>JavaScript</input1>
  <input2>Язык программирования для создания интерактивных веб-страниц.</input2>
</dl>

HTML

<dl class="glossary">
  <dt>HTML</dt>
  <dd>Язык гипертекстовой разметки.</dd>

  <input1>JavaScript</input1>
  <input2>Язык программирования для создания интерактивных веб-страниц.</input2>
</dl>

Просто добавьте новую пару тегов `<dt>` и `<dd>` после существующей, внутри контейнера `<dl>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Один термин — несколько определений

id: 37827_dl-04-one-term-many-definitions

Иногда у одного термина может быть несколько значений или описаний. Добавьте второе определение для термина 'Git', разметив его соответствующим тегом.

CSS

.glossary {
  font-family: sans-serif;
  background-color: #f4f4f9;
  border: 1px solid #dcdce6;
  border-radius: 8px;
  padding: 15px;
}

.glossary dt {
  font-weight: bold;
  color: #d9534f;
}

.glossary dd {
  margin-left: 20px;
  margin-bottom: 8px;
  color: #555;
}

                     <dl class="glossary">
  <dt>Git</dt>
  <dd>Распределённая система управления версиями.</dd>
  <input1>Инструмент для отслеживания изменений в файлах и совместной работы.</input1>
</dl>

HTML

<dl class="glossary">
  <dt>Git</dt>
  <dd>Распределённая система управления версиями.</dd>
  <input1>Инструмент для отслеживания изменений в файлах и совместной работы.</input1>
</dl>

Чтобы добавить несколько определений для одного термина (`<dt>`), просто разместите несколько тегов `<dd>` подряд после него.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Несколько терминов — одно определение

id: 37827_dl-05-many-terms-one-definition

Бывает и обратная ситуация, когда одно определение подходит сразу к нескольким терминам (например, синонимам). Добавьте второй термин 'Сервер' к общему определению.

CSS

.glossary {
  font-family: sans-serif;
  background-color: #f4f4f9;
  border: 1px solid #dcdce6;
  border-radius: 8px;
  padding: 15px;
}

.glossary dt {
  font-weight: bold;
  color: #0275d8;
}

.glossary dd {
  margin-left: 20px;
  color: #555;
}

                     <dl class="glossary">
  <dt>Хост</dt>
  <input1>Сервер</input1>
  <dd>Компьютер или программа, предоставляющая ресурсы другим устройствам в сети.</dd>
</dl>

HTML

<dl class="glossary">
  <dt>Хост</dt>
  <input1>Сервер</input1>
  <dd>Компьютер или программа, предоставляющая ресурсы другим устройствам в сети.</dd>
</dl>

Чтобы связать несколько терминов с одним определением, разместите несколько тегов `<dt>` подряд перед одним тегом `<dd>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Использование атрибутов для стилизации

id: 37827_dl-06-attributes-and-styling

Как и любые другие теги, элементы списка определений могут иметь атрибуты. Добавьте класс 'term-new' для нового термина 'API', чтобы выделить его цветом согласно заданным стилям.

CSS

.glossary {
  font-family: sans-serif;
  padding: 15px;
}

.glossary dt {
  font-weight: bold;
}

.glossary dd {
  margin-left: 20px;
  margin-bottom: 10px;
}

.term-new {
  color: #5cb85c;
  font-style: italic;
}

                     <dl class="glossary">
  <dt>HTTP</dt>
  <dd>Протокол передачи гипертекста.</dd>

  <dt input1="term-new">API</dt>
  <dd>Программный интерфейс приложения.</dd>
</dl>

HTML

<dl class="glossary">
  <dt>HTTP</dt>
  <dd>Протокол передачи гипертекста.</dd>

  <dt input1="term-new">API</dt>
  <dd>Программный интерфейс приложения.</dd>
</dl>

Атрибуты пишутся внутри открывающего тега. Чтобы добавить класс, используйте атрибут `class` со значением `term-new`, вот так: `<tag class="value">`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

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

id: 37827_dl-07-nested-content

Тег `<dd>` может содержать не только текст, но и другие HTML-элементы, например, изображения. Завершите структуру списка, добавив теги термина и описания для логотипа HTML5.

CSS

.tech-list {
  font-family: sans-serif;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
}

.tech-list dt {
  font-weight: 600;
  margin-bottom: 5px;
}

.tech-list dd {
  margin: 0 0 15px 15px;
}

.tech-list img {
  max-width: 64px;
  height: auto;
  border: 1px solid #eee;
}

                     <dl class="tech-list">
  <input1>Логотип HTML5</input1>
  <input2>
    <img src="https://naytikurs.ru/img/12s.svg" alt="Логотип HTML5">
  </input2>
</dl>

HTML

<dl class="tech-list">
  <input1>Логотип HTML5</input1>
  <input2>
    <img src="https://naytikurs.ru/img/12s.svg" alt="Логотип HTML5">
  </input2>
</dl>

Создайте стандартную пару `<dt>` и `<dd>`. Изображение `<img>` уже находится на своем месте, его просто нужно обернуть в тег описания `<dd>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку