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

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

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

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

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

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

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

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

Аттрибуты

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

Пример

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

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

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

Легенда

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

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

Смотри также

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

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

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

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

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

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

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

Если вы до сих пор создаете списки данных, используя таблицу, посмотрите внизу и сравните, насколько можно облегчить себе жизнь с помощью тэгов HTML 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>

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

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

Изучите курс и узнайте, как верстать современные сайты на 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; }

Отсюда видно, что, если понадобится изменить стиль или формат заголовка в 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>

В 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; }

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

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

Автор: Terrance

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

E-mail: [email protected]

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

Изучите курс и узнайте, как верстать современные сайты на 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>

Атрибуты

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

Пример

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

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

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

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

Твой код:

Результат:

Тег | htmlbook.ru

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

Описание

Тег <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. Вид списка определений