Dt тег – Как воспользоваться тэгами HTML DL, DT и DD для создания списка данных (альтернатива табличных данных)

Содержание

Тег | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 2.0+ 1.0+ 1.0+ 1.0+ 1.0+

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

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <dt> входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка определений. Каждый такой список начинается с контейнера <dl>, куда входит тег <dt> создающий термин и тег <dd> задающий определение этого термина. Закрывающий тег </dt> не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги.

Синтаксис

<dl>
  <dt>Термин 1</dt>
   <dd>Определение термина 1</dd>
  <dt>Термин 2</dt>
   <dd>Определение термина 2</dd>
</dl>

Закрывающий тег

Не обязателен.

Атрибуты

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

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список определений</title>
  <style>
   dd {
    font-style: italic; /* Курсивное начертание текста */
   }
   dt {
    margin-top: 1em; /* Отступ сверху */
   }
  </style>
 </head>
 <body> 

 <dl>
  <dt>GIF</dt>
  <dd>Формат графических файлов, широко применяемый при создании сайтов. 
   GIF использует 8-битовый цвет и эффективно сжимает сплошные цветные области, 
   при этом сохраняя детали изображения.</dd>
  <dt>JPEG</dt>
  <dd>Популярный формат графических файлов, широко применямый при создании 
  сайтов и хранения изображений. JPEG поддерживает 24-битовый цвет и сохраняет 
  яркость и оттенки цветов в фотографиях. Данный формат называют сжатием с потерями, 
  поскольку алгоритм JPEG выборочно отвергает данные. Метод сжатия может исказить 
  деталь в рисунке, особенно содержащий текст или изображение с четкими краями. 
  Формат JPEG не поддерживает прозрачность, когда вы сохраняете фотографию в формате 
  JPEG, прозрачные пиксели заполняются определенным цветом.</dd>
 </dl>

 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид списка определений

| HTML | WebReference

Элемент <dt> (от англ. description list term — термин списка описаний) входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка описаний. Каждый такой список начинается с контейнера <dl>, куда входит элемент <dt> создающий термин и элемент <dd> задающий описание этого термина.

Синтаксис

<dl>
  <dt>Термин 1</dt>
   <dd>Описание термина 1</dd>
  <dt>Термин 2</dt>
   <dd>Описание термина 2</dd>
</dl>

Закрывающий тег

Не обязателен.

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список описаний</title>
  <style>
   dd {
    font-style: italic; /* Курсивное начертание текста */
   }
   dt {
    margin-top: 1em; /* Отступ сверху */
   }
  </style>
 </head>
 <body> 
 <dl>
  <dt>GIF</dt>
  <dd>Формат графических файлов, широко применяемый при создании сайтов. 
   GIF использует 8-битный цвет и эффективно сжимает сплошные цветные области, 
   при этом сохраняя детали изображения.</dd>
  <dt>JPEG</dt>
  <dd>Популярный формат графических файлов, широко применяемый при создании 
  сайтов и хранения изображений. JPEG поддерживает 24-битный цвет и сохраняет 
  яркость и оттенки цветов в фотографиях. Данный формат называют сжатием с потерями, 
  поскольку алгоритм JPEG выборочно отвергает данные. Метод сжатия может исказить 
  деталь в рисунке, особенно содержащий текст или изображение с чёткими краями. 
  Формат JPEG не поддерживает прозрачность; когда вы сохраняете фотографию в формате 
  JPEG, прозрачные пиксели заполняются определённым цветом.</dd>
 </dl>
 </body>
</html>

Результат данного примера показан ниже.

Вид списка описаний

Рис. 1. Вид списка описаний

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

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

| Справочник HTML



Элемент <dt> (от англ. "definition term" ‒ «термин определения») обозначает термин из списка определений.

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

Синтаксис

<dl>
<dt>Термин</dt>
  <dd>Описание термина</dd>
</dl>

Закрывающий тег

Не обязателен.

Атрибуты

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

и события.

Стилизация по умолчанию

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

dt { 
    display: block;
}

Различия между HTML 4.01 и HTML5

В HTML 4.01 определяет имя в списке определений, а В HTML 5 тег определяет имя в списке описаний (толкований, характеристик, свойств, обозначений) .

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

Элемент <dt>

Пример HTML:

Попробуй сам
<dl>
<dt><b>Гипертекст</b></dt>
<dd>это ветвящийся или выполняющий действия по запросу текст</dd>
<dt><b>Тег языка разметки</b></dt>
<dd>это элемент языка гипертекстовой разметки</dd>
</dl>

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

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

Элемент
<dt> 3+ 1+ 2+ 1+ 1+ 1+
Элемент
<dt> 1+ 1+ 6+ 1+


: Термин для определения - Веб-технологии для разработчиков

HTML-элемент <dt> который определяет термин в описании или списке определений, как таковой должен использоваться внутри элемента  <dl> . Обычно за ним следует элемент <dd>. Кроме того, несколько элементов <dt> идущие друг за другом будут содержать свое определение в следующем идущем за ним элементом<dd>.

Последующий элемент <dd> (от англ. Description Details) предоставляет определение или другой связанный текст, относящийся к термину, указанным с помощью <dt>.

Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с https://github.com/mdn/interactive-examples и отправьте нам pull request.

Категории контента Нет
Разрешённое содержимое Потоковый контент, но без потомков <header>, <footer>, секционного контента или заголовочного контента.
Пропуск тегов Открывающий тег обязателен. Конечный тег может быть опущен, если за этим элементом непосредственно следует другой элемент <dt> или <dd>, или если в родительском элементе нет больше содержимого.
Разрешённые родители Перед элементом <dt> или <dd>, внутри <dl> или (в WHATWG HTML) элемента <div> который внутри <dl>.
Разрешённые ARIA-роли Нет
DOM-интерфейс HTMLElement До Gecko 1.9.2 (Firefox 4) включительно, Firefox реализует
HTMLSpanElement
интерфейс для этого элемента.

Аттрибуты

Этот элемент включает только глобальные аттрибуты.

Пример

Для примера можно использовать образец для <dl> элемента.

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

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

Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправьте нам pull request. Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
dtChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка
Да

Легенда

Полная поддержка  
Полная поддержка

Смотри также

Как воспользоваться тэгами HTML DL, DT и DD для создания списка данных (альтернатива табличных данных)

теги dl dt dd

От автора: Многие дизайнеры прошлого любили создавать веб-дизайн, используя таблицу и, когда дело доходило до исправления ошибок, это становилось их ахиллесовой пятой. Теперь, однако, когда дело доходит до построения списка данных на веб-странице, например, списка данных профиля, многие вместо этого пользуются таблицей HTML.

Фактически, используя тэги HTML dl, dt, dd, вы экономите на написании кода и добавляете своему контенту больше семантического значения. Тогда как таблицу лучше всего использовать для табличных данных, и не следует использовать для списка данных, в веб-форме или веб-разметке.

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

теги dl dt dd

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Если вы до сих пор создаете списки данных, используя таблицу, посмотрите внизу и сравните, насколько можно облегчить себе жизнь с помощью тэгов HTML dl, dt, dd.

теги dl dt dd

Оба столбца выглядят одинаково, но посмотрите внимательно на их код.

Табличный список данных

Обычный список данных с использованием следующий таблицы. Сначала мы делаем строку таблицы tr, в которой будет содержаться заголовок и ячейку таблицы с данными td. Затем, когда потребуется назначить стили элементу title, нам придется присвоить ячейке таблицы td класс.

<table> <tr> <td>Name: </td> <td>John Don</td> </tr> <tr> <td>Age: </td> <td>23</td> </tr> <tr> <td>Gender: </td> <td>Male</td> </tr> <tr> <td>Day of Birth:</td> <td>12th May 1986</td> </tr> </table>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<table>

    <tr>

        <td>Name: </td>

        <td>John Don</td>

    </tr>

    <tr>

        <td>Age: </td>

        <td>23</td>

    </tr>

    <tr>

        <td>Gender: </td>

        <td>Male</td>

    </tr>

    <tr>

        <td>Day of Birth:</td>

        <td>12th May 1986</td>

    </tr>

</table>

Тут в CSS мы назначаем стили классу title, который объявили в HTML.

теги dl dt dd

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

/*TABLE LIST DATA*/ table { margin-bottom:50px; } table tr .title { background:#5f9be3; color:#fff; font-weight:bold; padding:5px; width:100px; } table tr .text { padding-left:10px; }

/*TABLE LIST DATA*/

table {

    margin-bottom:50px;

}

table tr .title {

    background:#5f9be3;

    color:#fff;

    font-weight:bold;

    padding:5px;

    width:100px;

}

table tr .text {

    padding-left:10px;

}

Отсюда видно, что, если понадобится изменить стиль или формат заголовка в CSS, вам придется присвоить каждому td заголовка класс. Если, помимо того, нужно присвоить стили данным, вам придется присвоить класс и им, так что на самом деле вы пишете слишком много кода. Большое количество кода означает большой размер файла для скачивания, большую возможность ошибок и сложность в поддержании.

Списочные данные DL, DT, DD

Теперь давайте взглянем на использование тэгов HTML dl, dt, dd для построения данных в список. Сначала у нас появляется тэг dl (список описаний), содержащий весь комплект данных, далее имеются тэги dt (определяет пункт в списке) и dd (описывает пункт списка), содержащие заголовок и данные.

<dl> <dt>Name: </dt> <dd>John Don</dd> <dt>Age: </dt> <dd>23</dd> <dt>Gender: </dt> <dd>Male</dd> <dt>Day of Birth:</dt> <dd>12th May 1986</dd> </dl>

<dl>

    <dt>Name: </dt>

    <dd>John Don</dd>

    <dt>Age: </dt>

    <dd>23</dd>

    <dt>Gender: </dt>

    <dd>Male</dd>

    <dt>Day of Birth:</dt>

    <dd>12th May 1986</dd>

</dl>

В CSS нам понадобится присвоить тэгу dt свойство float, так заголовок списочных данных выровняется по левому краю. Остальные стили – на ваше усмотрение.

/*DL, DT, DD TAGS LIST DATA*/ dl { margin-bottom:50px; } dl dt { background:#5f9be3; color:#fff; float:left; font-weight:bold; margin-right:10px; padding:5px; width:100px; } dl dd { margin:2px 0; padding:5px 0; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

/*DL, DT, DD TAGS LIST DATA*/

dl {

    margin-bottom:50px;

}

dl dt {

    background:#5f9be3;

    color:#fff;

    float:left;

    font-weight:bold;

    margin-right:10px;

    padding:5px;

    width:100px;

}

dl dd {

    margin:2px 0;

    padding:5px 0;

}

На примере тэгов dl, dt, dd видно, что так кода получается меньше, он глаже и семантичнее.

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

киберсант-вебмастер

Автор: Terrance

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: [email protected]

теги dl dt dd

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее киберсант-вебмастер

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

HTML тег dt | назначение, синтаксис, атрибуты, примеры

Последнее обновление: 25.02.2009

Тег <dt> (англ. define term — определяемый термин) — тег-контейнер, используется при создании списка определений вместе с <dl> и <dd>. Задает название термина.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

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

Атрибуты

Основные Вспомогательные События

class определяет имя используемого класса
dir определяет направление символов:
  • ltr — слева направо
  • rtl — справа налево
id уникальный индетификатор
lang определяет язык отображаемого документа
onclick щелчек на элементе
ondblclick двойной щелчек на элементе
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
style задает встроенную таблицу стилей
title всплывающая подсказка
Пример

Создаем список определений

<dl>
<dt>dl</dt>
<dd>тег-контейнер списка определений</dd>
<dt>dt</dt>
<dd>задает термин в списке</dd>
<dt>dd</dt>
<dd>задает описание термина</dd>
</dl>

Рекомендации по использованию

Списки определений применяются при верстке словарей терминов, списков новостей, диалогов.

Твой код:
<html> <head> <title></title> </head> <body> <h5>Термины</h5> <dl> <dt>dl</dt> <dd>тег-контейнер списка определений</dd> <dt>dt</dt> <dd>задает термин в списке</dd> <dt>dd</dt> <dd>задает описание термина</dd> </dl> </body> </html> Сделай код и жми тут

Результат:
большой полигон

Тег | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 2.0+ 1.0+ 1.0+ 1.0+ 1.0+

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

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <dl> входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка определений. Каждый такой список начинается с контейнера <dl>, куда входит тег <dt> создающий термин и тег <dd> задающий определение этого термина.

Синтаксис

<dl>
  <dt>Термин 1</dt>
   <dd>Определение термина 1</dd>
  <dt>Термин 2</dt>
   <dd>Определение термина 2</dd>
</dl>

Закрывающий тег

Обязателен.

Атрибуты

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

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список определений</title>
  <style>
   dd {
    font-style: italic; /* Курсивное начертание текста */
   }
   dt {
    margin-top: 1em; /* Отступ сверху */
   }
  </style>
 </head>
 <body> 

 <dl>
  <dt>GIF</dt>
  <dd>Формат графических файлов, широко применяемый при создании сайтов. 
   GIF использует 8-битовый цвет и эффективно сжимает сплошные цветные области, 
   при этом сохраняя детали изображения.</dd>
  <dt>JPEG</dt>
  <dd>Популярный формат графических файлов, широко применямый при создании 
  сайтов и хранения изображений. JPEG поддерживает 24-битовый цвет и сохраняет 
  яркость и оттенки цветов в фотографиях. Данный формат называют сжатием с потерями, 
  поскольку алгоритм JPEG выборочно отвергает данные. Метод сжатия может исказить 
  деталь в рисунке, особенно содержащий текст или изображение с четкими краями. 
  Формат JPEG не поддерживает прозрачность, когда вы сохраняете фотографию в формате 
  JPEG, прозрачные пиксели заполняются определенным цветом.</dd>
 </dl>

 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид списка определений

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

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