Dt dd dl: Теги dl, dt и dd, список описаний — Разметка текста — HTML Academy

Leave a Comment / Разное / By /

: Элемент списка описаний — HTML

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

Категории контентаПотоковый контент, и если потомки элемента <dl> включают одну группу имя-значение явный контент.
Допустимое содержимоеЛибо: Ноль или более групп каждая из которых состоит из одного или более элементов <dt> за которым следует один или более элементов <dd>, необязательно смешанных с элементами <script> и <template>. Либо: Один или более элементов <div>
, необязательно смешанных с элементами <script> и <template>.
Пропуск теговНет, открывающий и закрывающий теги обязательны.
Допустимые родителиЛюбой элемент который принимает потоковый контент.
Допустимые ARIA-ролиgroup (en-US), presentation (en-US)
DOM-интерфейсHTMLDListElement (en-US)

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

Одиночные термин и определение

<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: ": ";
}

Оборачивание групп имя-значение в

<div> элементы

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

<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
Specification
HTML Standard
# the-dl-element

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

HTML/Элемент dl

Синтаксис

(X)HTML

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
  ...
</dl>

Описание

Элемент dl (от англ. «definition list» ‒ «список определений») является элементом-контейнером для списка определений. В данный элемент могут быть вложены такие элементы как dt (элемент термина) и dd (элемент определения).

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

Спецификация

Верс.Раздел
HTML
2. 0Definition List: DL, DT, DDПеревод
3.2Definition Lists
4.0110.3 Definition lists: the DL, DT, and DD elements
DTD: Transitional Strict Frameset
5.04.4.8 The dl element
5.14.4.8. The dl element
XHTML
1.0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1Extensible HyperText Markup Language

Атрибуты

compact
Устанавливает минимальное расстояние между элементами списка.
Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

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

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Элемент dl</title>
</head>
<body>
<h2>Пример с элементом «dl»</h2>
<dl>
<dt><b>Гипертекст</b></dt>
<dd>это ветвящийся или выполняющий действия по запросу текст</dd>
<dt><b>Тег языка разметки</b></dt>
<dd>это элемент языка гипертекстовой разметки</dd>
</dl>
</body>
</html>

Элемент dl

Тег HTML dd

❮ Назад Полный справочник HTML Далее ❯


Пример

Список описаний с терминами и описаниями:


Кофе

  
Черный горячий напиток

Молоко

  
Белый холодный напиток

Попробуйте сами »

Определение и использование

Тег

используется для описания термин/имя в списке описания.

Тег

используется в сочетании с
(определяет список описаний) и
(определяет термины/имена).

Внутри тега

можно размещать абзацы, разрывы строк, изображения, ссылки, списки и т. д.

Поддержка браузера

Элемент
<дд> Да Да Да Да Да

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

Тег

также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег

также поддерживает атрибуты событий в HTML.

Связанные страницы

Учебник по HTML: Списки HTML

Ссылка на DOM HTML: Объект DD

Настройки CSS по умолчанию

Большинство браузеров будут отображать элемент

со следующими значениями по умолчанию:

Пример

dd {
  display: block;
  левое поле: 40 пикселей;
}

Попробуйте сами »

❮ Предыдущая Полный справочник HTML Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

901 01 Лучшие примеры Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FOR УМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

h50: Использование списков описаний | Методы для WCAG 2.0

См. «Понимание методов для критериев успеха WCAG» для получения важной информации об использовании этих информативных методов и их связи с нормативными критериями успеха WCAG 2.0. В разделе «Применимость» объясняется область применения метода, и наличие методов для конкретной технологии не означает, что эту технологию можно использовать во всех ситуациях для создания контента, соответствующего WCAG 2.0.

Целью этого метода является предоставление описания имен или терминов с помощью представление их в списке описания. Список размечен с помощью dl элемент. В списке каждый термин помещается в отдельный элемент dt , и его описание идет в элементе dd , непосредственно следующем за ним. Несколько терминов могут быть связаны с одним описанием, как и один термин с несколькими описаниями, при условии сохранения семантической последовательности. 9Атрибут 0022 title можно использовать для предоставления дополнительной информации о список описания. Использование списков описаний гарантирует, что термины и их описания семантически связаны даже при изменении формата представления, а также гарантирует, что эти термины и описания семантически сгруппированы как единое целое.

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

Примечание: В HTML5 было введено название «Список описаний». В предыдущих версиях эти списки назывались «списками определений».

Список описаний морских терминов, используемых на веб-сайте, посвященном парусному спорту.

Пример кода: 

 

  
Узел

  <дд>
    
узел – это единица скорости, равная 1. 
      морская миля в час (1,15 мили в час или 1,852
      километров в час).

  
  
Порт

  <дд>
    
Порт – морской термин (используется на
      лодки и корабли), что относится к левой стороне
      корабля, как его воспринимает человек, стоящий лицом к
      нос (передняя часть судна).

  
  
Правый борт

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

Ресурсы предназначены только для информационных целей, одобрение не подразумевается.

  • Списки описаний HTML5

  • Определение HTML 4 списки: элементы DL, DT и DD

Процедура

Для любого набора терминов и связанных с ними описаний:

  1. Убедитесь, что список содержится в элементе dl .

  2. Убедитесь, что каждый термин в описываемом списке содержится в пределах dt элемент.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *