Dt тег: : Термин для определения — HTML

, , — HTML — Дока

1. Кратко
2. Пример
3. Как понять
4. Примеры написания
5. Подсказки

Кратко

Скопировано

Теги <dl>, <dt> и <dd> используются для вёрстки списка описаний («dl» означает «description list»).

Пример

Скопировано

<p>Животные героев «Гарри Поттера»</p><dl>  <dt>Букля</dt>  <dd>Полярная сова Гарри Поттера</dd>  <dt>Живоглот</dt>  <dd>Полукот Гермионы Грейнджер</dd>  <dt>Пушистик</dt>  <dd>Кролик Лаванды Браун</dd>  <dt>Нагайна</dt>  <dd>Змея Волан-де-Морта</dd></dl>
          <p>Животные героев «Гарри Поттера»</p>
<dl>
  <dt>Букля</dt>
  <dd>Полярная сова Гарри Поттера</dd>
  <dt>Живоглот</dt>
  <dd>Полукот Гермионы Грейнджер</dd>
  <dt>Пушистик</dt>
  <dd>Кролик Лаванды Браун</dd>
  <dt>Нагайна</dt>
  <dd>Змея Волан-де-Морта</dd>
</dl>

Как понять

Скопировано

Иногда требуется сверстать не просто перечень элементов, а список терминов и их определений, либо просто список пар «ключ-значение». Семантически верно будет такие перечни верстать при помощи тегов <dl>, <dt>, <dd>.

Элемент <dl> аналогично элементам <ul> и <ol> является внешней обёрткой для элементов списка.

Элемент <dt> используется для вёрстки термина либо ключа в паре «ключ-значение». Как правило, следом за ним идёт либо ещё один тег <dt> (если есть необходимость сверстать несколько терминов с одним определением), либо тег <dd>.

Тегом <dd> верстается определение термина, либо значение в паре «ключ-значение». Следом за этим тегом может идти как ещё один тег <dd> (если у термина несколько определений), так и тег <dt> (следующий термин).

Примеры написания

Скопировано

Классический вариант. Один термин — одно определение:

<dl>  <dt>Blink</dt>  <dd>Движок в браузерах Chrome, Edge, Opera</dd>  <dt>Gecko</dt>  <dd>Движок в браузере Firefox</dd>  <dt>WebKit</dt>  <dd>Движок в браузере Apple Safari</dd></dl>
           <dl>
  <dt>Blink</dt>
  <dd>Движок в браузерах Chrome, Edge, Opera</dd>
  <dt>Gecko</dt>
  <dd>Движок в браузере Firefox</dd>
  <dt>WebKit</dt>
  <dd>Движок в браузере Apple Safari</dd>
</dl>

Несколько терминов с общим определением:

<dl>  <dt>Firefox</dt>  <dt>Mozilla Firefox</dt>  <dt>FF</dt>  <dd>    Свободный браузер на движке Gecko,    разработкой и распространением которого    занимается Mozilla Corporation.   </dd></dl>
          <dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>FF</dt>
  <dd>
    Свободный браузер на движке Gecko,
    разработкой и распространением которого
    занимается Mozilla Corporation.
  </dd>
</dl>
 

Термин с несколькими определениями:

<dl>  <dt>Chrome</dt>  <dd>Браузер, разрабатываемый компанией Google, вышел в 2008 году.</dd>  <dd>Элемент 6-й группы 4-го периода периодической системы.</dd></dl>
          <dl>
  <dt>Chrome</dt>
  <dd>Браузер, разрабатываемый компанией Google, вышел в 2008 году.</dd>
  <dd>Элемент 6-й группы 4-го периода периодической системы.</dd>
</dl>

Отображение метаданных (пар «ключ-значение»):

<dl>  <dt>Имя</dt>  <dd>Гарри Джеймс Поттер</dd>  <dt>День рождения</dt>  <dd>31 июля 1980 года</dd>  <dt>Телосложение</dt>  <dd>худощавый, невысокого роста</dd>  <dt>Особые приметы</dt>  <dd>Носит круглые очки; шрам в виде молнии на лбу.  </dd></dl>
          <dl>
  <dt>Имя</dt>
  <dd>Гарри Джеймс Поттер</dd>
  <dt>День рождения</dt>
  <dd>31 июля 1980 года</dd>
  <dt>Телосложение</dt>
  <dd>худощавый, невысокого роста</dd>
  <dt>Особые приметы</dt>
  <dd>Носит круглые очки; шрам в виде молнии на лбу.</dd>
</dl>

Подсказки

Скопировано

💡 При вёрстке перечня метаданных (пар «ключ-значение») удобно разделитель вносить в псевдоэлемент, а не писать текстом рядом с каждым ключом:

dt::after {  content: ': ';}
          dt::after {
  content: ': ';
}
 

💡 В отличие от списков <ul> и <ol>, группы терминов (<dt>) и описаний (<dd>) с недавних пор можно оборачивать в <div>.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

<li>

ctrl + alt + ←

→

<audio>

ctrl + alt + →

Тег — Учебник HTML — schoolsw3.com

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

Пример

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

<dl>
 <dt>Кофе</dt>

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

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

Тег <dt> определяет термин/имя в списке описаний.

Тег <dt> используется в сочетании с <dl> (определяет список описаний) и <dd> (описывает каждый термин/имя).

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

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

Тег <dt> также поддерживает Глобальные атрибуты d HTML.

События атрибутов

Тег <dt> также поддерживает События атрибутов d HTML.

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

HTML учебник: HTML Списки

HTML DOM справочник: Объект dt

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

Большинство браузеров будут отображать элемент <dt> со следующими значениями по умолчанию:

Пример

dt {
  display: block;
}

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

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

ТОП Учебники

ТОП Справочники

ТОП Примеры

Форум | О SchoolsW3

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.

HTML: тег

В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом

  w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<голова>



<тело>
<дл>
   
Завтрак
   
Первый прием пищи
   
   
Закуска
   
Небольшое количество еды между приемами пищи


 

 

<голова>



<тело>
<дл>
   
Обед
   
Прием пищи в середине дня
   
Ужин
   
Последний прием пищи в день


 

 

<голова>



<тело>
<дл>
   
Завтрак
   
Первый прием пищи
   
Обед
   
Прием пищи в середине дня


 

.

• Пример 1: Содержит список терминов и их определений. Обратите внимание на использование dfn , чтобы указать, что это определяющий экземпляр термина.
• Пример 2. Здесь термин связан с тремя значениями.

Атрибуты

Теги HTML могут содержать один или несколько атрибутов. Атрибуты добавляются к тегу, чтобы предоставить браузеру больше информации о том, как тег должен выглядеть или вести себя. Атрибуты состоят из имени и значения, разделенных знаком равенства (=), при этом значение заключено в двойные кавычки. Вот например стиль="цвет:черный;" .

Существует 3 типа атрибутов, которые вы можете добавить к своим HTML-тегам: специфичные для элемента, глобальные атрибуты и атрибуты содержимого обработчика событий.

Ниже перечислены атрибуты, которые можно добавить к этому тегу.

Специфичные для элемента атрибуты

В следующей таблице показаны атрибуты, характерные для этого тега/элемента.

Атрибут	Описание
Нет

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

Следующие атрибуты являются стандартными для всех тегов HTML 5 (хотя атрибут tabindex не применяется к элементам диалога ).

• ключ доступа
• автокапитализировать
• класс
• редактируемый контент
• данные-*
• директор
• перетаскиваемый
• скрытый
• идентификатор
• режим ввода
• это
• ИД
• элементпроп
• Артикул
• предметная область
• тип изделия
• язык
• часть
• гнездо
• проверка правописания
• стиль
• tabindex
• Название
• перевод

Полное объяснение этих атрибутов см.