Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/ru/docs/Web/HTML/Reference/Elements/dl below:

<dl>: Ðлемент списка описаний - HTML

Baseline Widely available

HTML-элемент <dl> (от англ. Description List) представляет собой список описаний. Этот элемент служит контейнером для списка пар терминов (определяемых элементом <dt>) и их описаний (определяемых элементами <dd>). Этот элемент обычно используют при создании глоссария или для отображения метаданных (списка пар ключ-значение).

<p>Cryptids of Cornwall:</p>

<dl>
  <dt>Beast of Bodmin</dt>
  <dd>A large feline inhabiting Bodmin Moor.</dd>

  <dt>Morgawr</dt>
  <dd>A sea serpent.</dd>

  <dt>Owlman</dt>
  <dd>A giant owl-like creature.</dd>
</dl>

p,
dt {
  font-weight: bold;
}

dl,
dd {
  font-size: 0.9rem;
}

dd {
  margin-bottom: 1em;
}

Для данного элемента доступны только глобальные атрибуты.

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>

  <!-- Other terms and descriptions -->
</dl>

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>

  <!-- Other terms and descriptions -->
</dl>

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>
  <dd>
    The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a
    mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).
  </dd>

  <!-- Other terms and descriptions -->
</dl>

Кроме того, можно определить несколько терминов с несколькими соответствующими определениями, путём комбинирования приведённых выше примеров.

Список определений очень полезен для отображения метаданных, как список пар ключ-значение.

<dl>
  <dt>Name</dt>
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>

Подсказка: Может быть полезно задать разделитель для пары ключ-значение при помощи CSS3, например:

dt:after {
  content: ": ";
}

WHATWG HTML разрешает оборачивать каждую группу имя-значение в элементе <dl> в элемент <div>. Это может быть полезно, когда используются микроданные или когда глобальные атрибуты применяются к целой группе, или для стилевых целей.

<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>

Не используйте данный элемент (как и элемент <ul>) просто для создания отступов на странице. Не смотря на то, что это работает, — это является плохой практикой и подменяет семантическое значение списка определений.

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

Каждый скринридер произносит содержимое элемента <dl> по-разному. Некоторые скринридеры, такие как VoiceOver на iOS, не будут озвучивать, что содержимое <dl> это список. В связи с этим, убедитесь, что содержимое каждого элемента списка написано таким образом, что оно сообщает о своём отношении с другими элементами списка в списке группы.

• CodePen - HTML Buddies: dt & dd

• Элемент <dt>
• Элемент <dd>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4