0Pricing
HTML Academy · Урок

Списки описаний: dl, dt и dd

Размечайте пары термин–определение с помощью списков описаний

«Списки описаний: dl, dt и dd» — бесплатный урок HTML Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Что такое список описаний

Список описаний объединяет термины with их описаниями:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — the structure of the web.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — the presentation of the web.</dd>

  <dt>JavaScript</dt>
  <dd>The programming language of the web.</dd>
</dl>

Элементы dl, dt и dd

Список описаний состоит из трёх элементов:

  • <dl> — контейнер списка описаний
  • <dt> — термин описания (ключ)
  • <dd> — сведения об описании (значение)

Несколько dd для одного dt

Один термин может иметь несколько описаний:

<dl>
  <dt>HTML</dt>
  <dd>Stands for HyperText Markup Language.</dd>
  <dd>First published as HTML 2.0 in 1995.</dd>
  <dd>Current version: HTML5 (Living Standard).</dd>
</dl>

Несколько dt для одного dd

Несколько терминов могут использовать одно описание (синонимы, псевдонимы):

<dl>
  <dt>Username</dt>
  <dt>Login</dt>
  <dt>Handle</dt>
  <dd>The unique identifier used to log in to your account.</dd>
</dl>

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

Списки описаний идеально подходят для:

  • Глоссариев и определений
  • Разделов FAQ (вопрос → ответ)
  • Метаданных продукта (Автор: Jane, Опубликовано: 2024)
  • Сведений о рецепте (Время подготовки: 10 мин, Порций: 4)
  • Документации параметров API

FAQ с dl

Создайте FAQ с помощью списков описаний:

<dl class="faq">
  <dt>Is HTML a programming language?</dt>
  <dd>No. HTML is a markup language. It defines structure and meaning, not logic or computation.</dd>

  <dt>Do I need to close void elements?</dt>
  <dd>In HTML5, void elements like &lt;img&gt; and &lt;br&gt; do not need a closing slash.</dd>
</dl>

dl для метаданных

Отображайте метаданные статьи или продукта:

<article>
  <h1>Responsive Images Guide</h1>

  <dl class="metadata">
    <dt>Author</dt>
    <dd>Jane Smith</dd>

    <dt>Published</dt>
    <dd><time datetime="2024-03-15">March 15, 2024</time></dd>

    <dt>Reading time</dt>
    <dd>8 minutes</dd>
  </dl>
</article>

Оформление dl

Оформляйте списки описаний with CSS:

/* Two-column layout */
dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
}

dt {
  font-weight: bold;
  color: #555;
}

dd {
  margin: 0;  /* Remove browser default dd margin */
}

Вложенные dl

Списки описаний можно вкладывать для иерархических определений:

<dl>
  <dt>HTML Elements</dt>
  <dd>
    <dl>
      <dt>Block elements</dt>
      <dd>Take full width: div, p, h1-h6</dd>
      <dt>Inline elements</dt>
      <dd>Flow with text: span, a, strong</dd>
    </dl>
  </dd>
</dl>

dl и table для пар ключ–значение

Когда использовать <dl>, а когда — <table> для данных «ключ–значение»:

  • dl — связи между терминами и описаниями (пары «имя–значение»)
  • table — табличные данные со строками и столбцами (несколько атрибутов для каждого элемента)
<dl>
  <dt>Name</dt><dd>Jane</dd>
  <dt>Role</dt><dd>Developer</dd>
</dl>
<!-- vs table for multiple users with same attributes -->

Div внутри dl

Объединять группы dt/dd в <div> внутри <dl> допустимо в HTML5:

<dl>
  <div>
    <dt>HTML</dt>
    <dd>Markup language for web pages.</dd>
  </div>
  <div>
    <dt>CSS</dt>
    <dd>Styling language for web pages.</dd>
  </div>
</dl>
<!-- Useful for zebra-striping or grouping with CSS -->

Быстрая проверка

Какой элемент содержит определение или значение в списке описаний?

Повторение: списки описаний

Основные сведения о списках описаний:

  • <dl> — контейнер списка описаний
  • <dt> — термин (ключ, вопрос, имя)
  • <dd> — описание (значение, ответ, определение)
  • Один dt может иметь несколько dd; несколько dt могут использовать одно dd
  • Идеально подходят для глоссариев, FAQ и метаданных
  • Объединяйте группы в <div> для гибкого оформления

Часто задаваемые вопросы

Урок «Списки описаний: dl, dt и dd» бесплатный?

Да — полный текст урока «Списки описаний: dl, dt и dd» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Списки описаний: dl, dt и dd»?

Размечайте пары термин–определение с помощью списков описаний Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Списки описаний: dl, dt и dd»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Неупорядоченные списки: ul и li
  2. Упорядоченные списки: ol, start, reversed и type
  3. Списки описаний: dl, dt и dd
  4. Вложенные списки и стилизация списков
← Назад к HTML Academy