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

| HTML | WebReference

Элемент <dl> (от англ. description list — список описаний) входит в тройку элементов <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

Зачем использовать теги списков определений (DL,DD,DT) для HTML форм вместо таблиц?

Недавно я столкнулся с несколькими примерами, которые делают такие вещи, как:

<dl>
  <dt>Full Name:</dt>
  <dd><input type="text" name="fullname"></dd>
  <dt>Email Address:</dt>
  <dd><input type="text" name="email"></dd>
</dl>

для выполнения форм HTML. А почему это так? В чем преимущество использования таблиц?

html css forms Поделиться Источник cletus     06 февраля 2009 в 05:39

11 Ответов



103

Я думаю, что это зависит от вас, чтобы определить семантику, но на мой взгляд:

Вместо списка определений следует использовать свойства, связанные с формой.

<form>
  <label for="fullname">Full Name:</label>
  <input type="text" name="fullname">
  <label for="email">Email Address:</label>
  <input type="text" name="email">
</form>

Атрибут «for» в теге <label> должен ссылаться на атрибут «id» тега <input>. Обратите внимание, что если метки связаны с полями, щелчок по метке приведет к фокусировке связанного поля.

Вы также можете использовать теги, такие как <fieldset> для объединения разделов формы вместе и <legend> для подписи набора полей.

Поделиться sjstrutt     06 февраля 2009 в 07:04



46

Я успешно использовал технику, описанную в этой статье , несколько раз.

Я согласен с sjstrutt , что вы должны использовать связанные с формой теги, такие как label и form в ваших формах, но HTML, описанный в его примере, часто будет не хватать некоторого кода, который вы можете использовать как «hooks» для стилизации вашей формы с CSS.

Как следствие этого я markup мои формы таковы:

<form name="LoginForm" action="thispage">
    <fieldset>
        <legend>Form header</legend>
        <ul>
            <li>
                <label for="UserName">Username: </label>
                <input name="UserName" type="text" />
            </li>
            <li>
                <label for="Password">Password: </label>
                <input name="Password" type="text" />
            </li>
        </ul>
    </fieldset>
    <fieldset>
        <input type="submit" value="Login" />
    </fieldset>
</form>

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

Поделиться Hauge     06 февраля 2009 в 09:09



21

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

HTML, исторически, смешал семантику с форматированием. Самыми плохими примерами являются теги шрифтов и таблицы. Переход к CSS для форматирования и удаление большого количества чистых тегов форматирования из XHTML несколько восстанавливает разделение смысла от форматирования. Разделив форматирование на CSS, вы можете отображать один и тот же HTML различными способами, переформатируя его для широкого браузера, небольшого мобильного браузера, печати, обычного текста и т. д…

Для просветления посетите дзенский сад CSS .

Поделиться Schwern     06 февраля 2009 в 05:49



13

Списки определений имеют семантическое значение. Они предназначены для перечисления терминов (<dt>) и связанных с ними определений (<dd>)., поэтому в данном случае a <dl> отражает семантическое значение содержания более точно, чем таблица.

Поделиться Bret     06 февраля 2009 в 05:48



13

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

Представьте себе, что вы должны были прочитать веб-страницу, вне нагрузки, для слепого человека. Вы не скажете: «Хорошо, у меня здесь есть список определений . Первый член — это ‘name’.»Вместо этого вы , вероятно, скажете: «Хорошо, у нас есть форма здесь, и она выглядит так, как будто есть набор полей, первый вход помечен ‘name’.»

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

Надеюсь, это поможет.

Поделиться Jeremy Ricketts     06 февраля 2009 в 07:23



12

Использование dl dt, dd для форм — это просто еще один способ структурировать ваши формы, наряду с ul li, div и table . Вы всегда можете поместить label в dt . Таким образом, вы сохраняете определенный элемент формы label на месте.

<form action="/login" method="post"> 
    <dl>
        <dt><label for="login">Login</label></dt>
        <dd><input type="text" name="login"/></dd>
        <dt><label for="password">Password</label></dt>
        <dd><input type="password" name="password"/></dd>  
        <dd><input type="submit" value="Add"/></dd>
    </dl>
</form>

Поделиться ak.     11 июля 2010 в 10:32



4

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

В вашем случае был отправлен правильный код:

<form>
    <label for="fullname">Full Name:</label>
    <input type="text" name="fullname">
    <label for="email">Email Address:</label>
    <input type="text" name="email">
</form>

Вы создаете форму с входными данными и метками для этих входных данных, а не устанавливаете список слов и определяете их.

Если вы делаете какой-то раздел справки, то списки определений будут уместны, например:

<dl>
    <dt>HTML</dt>
    <dd>Hypertext Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascade Stylesheets</dd>
    <dt>PHP</dt>
    <dd>Hypertext Preprocessor</dd>
</dl>

Поделиться Andrew G. Johnson     01 мая 2009 в 16:18



3

Одна из причин использования <dl> для разметки формы заключается в том, что с помощью <dl> гораздо проще выполнять причудливые трюки компоновки CSS, чем с помощью <table>..другая часть заключается в том, что он лучше отражает семантику формы (список пар метка/поле), чем таблица.

Хорошо, ненависть к столу-тоже часть этого.

Поделиться Theran    

06 февраля 2009 в 05:50



2

Практически все формы являются табличными. Вы когда-нибудь видели форму, которая не является табличной? В рекомендациях, которые я прочитал, предлагалось использовать табличный тег для табличного представления, и это именно то, для чего предназначены формы, календари и электронные таблицы. И теперь они используют DD и DT вместо таблиц? К чему же приходит паутина?! 🙂

Поделиться netrox     07 февраля 2010 в 05:00



1

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

Поделиться staticsan     06 февраля 2009 в 06:09



0

Данные списка таблиц будут выглядеть следующим образом:

<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>

И Вы можете использовать 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>

Поделиться Kesar Sisodiya     15 апреля 2014 в 06:33


Похожие вопросы:


CSS: <DL> с интервалом / полем между парами dt/dd

У меня есть следующие html: <dl> <dt>Item 1</dt> <dd> <ul> <li>Value 1</li> </ul> </dd> <dt>Item 2</dt> <dd> <!— this item…


dl dt dd теги-можем ли мы добавить какие-либо теги между dd?

Мое меню разработано с тегами dl dt dd . ‘One’, ‘two’,… есть пункты меню. ‘Header’-заголовок меню. <dl> <dt>Header</dt> <dd>One</dd> <dd>Two</dd>…


Typo3/CKEditor: разрешить список определений (dl, dt, dd)

этот вопрос сводит меня с ума. Я использую typo3 (8.7.13) с CKEditor в качестве RTE. Теперь я хочу разрешить использовать <dl> , <dt> и <dd> в режиме просмотра исходного кода. Но…


CSS стиль списка определений <dl>

Я пытаюсь CSS стиль некоторые HTML, чтобы выглядеть следующим образом. Я решил использовать список определений с некоторыми классами, чтобы сделать это. Я пытаюсь двигаться в цене сразу же после ДТ…


Визуализация списков определений HTML в лифте

Еще один вопрос новичка лифта: Я хочу отобразить список определений HTML в таком фрагменте кода Lift: <dl> <dt>Name</dt> <dd>Seppl</dd> <dt>Street</dt>…


Каковы преимущества использования списков описаний HTML (dl, dt, dd)?

MDN объясняет , что теги <dl> , <dt> и <dd> можно использовать для реализации пары glossary или списка пар ключ-значение. Согласно maxdesign.com.au (статья опубликована в 2004…


Zend Framework-обернуть dt dd в dl

Из другого вопроса в Change HTML output of Zend_Form кто-нибудь знает, как я могу создать следующий вывод html? (Оберните каждый набор dtdd с помощью dl) <form> <fieldset> <dl>…


jQuery развернуть свернуть все теги DT в списке определений (DL)

Вот пример того, что я пытаюсь сделать, за исключением того, что он использует списки (UL и LI): http://homework.nwsnet.de/news/ea21_turn-nested-lists-into-a-collapsible-tree-with-jquery Мои данные…


html dl, dt и DD теги для создания списка

Кто-нибудь использует теги DL, DT и DD? У меня есть список с каждым элементом, имеющим название и описание, и мне было интересно, будет ли это лучше всего использовать для него или простые теги ul и…


Добавление заголовка в несколько списков определений?

Я хочу иметь несколько списков определений и иметь один заголовок для этих списков, например: //how can I add the title of Items in fridge <dl> <dt>Food:</dt>…


| HTML | WebReference

Элемент <dd> (от англ. description list description — описание списка описаний) входит в тройку элементов <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-теги dl, dt и dd.

Доброго времени суток. Меня зовут Михаил.

Специализируюсь на создании сайтов и их настройке. Разрабатываю современные сайты, учитывая каждое пожелание заказчика уже более 7 лет. Завершены сотни проектов.

Если Вам необходимо создать сайт, настроить его, или получить другую помощь в этой области, то смело выбирайте услугу или свяжитесь со мной. Всегда рад Вам помочь и готов ответить на Ваши вопросы.

В прошлом видео уроке мы начали изучать очередной раздел, посвященный HTML-спискам. И познакомились с тремя HTML-тегами, а также узнали, как в HTML сделать меню. Кстати не только в HTML, но и различных движках тоже, так как принцип у всех сайтов один и основаны они все на HTML, так или иначе. Для создания меню мы использовали HTML-списки.

Продолжая тему списков, сегодня мы познакомимся с еще тремя HTML-тегами, которые помогут нам создавать списки определений на странице. Разберемся что это такое? Как ими пользоваться и т.д. Конечно, списки определений менее популярны тех списков, о которых мы говорили прошлый раз. Но опять же, чтобы раздел был раскрыт полностью, а не на половину мы их разберем.

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

Видео урок: Списки определений. HTML-теги dl, dt и dd.

HTML-справочник и другие материалы можно и нужно скачать здесь!

А в следующем видео уроке мы начнем новый раздел посвященный 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

Описание

Тег <dd> входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка определений. Каждый такой список начинается с контейнера <dl>, куда входит тег <dt> создающий термин и тег <dd> задающий определение этого термина. Закрывающий тег </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. Вид списка определений

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



Элемент <dd> (от англ. «definition description» ‒ «список данных») обозначает описание (определение) термина.

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

Внутри тега <dd> можно размещать абзацы, списки, ссылки, изображения и т. д.

Синтаксис

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

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

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

Атрибуты

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

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

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

dd { 
    display: block;
    margin-left: 40px;
}

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

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

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

Элемент <dd>

Пример HTML:

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

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

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

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


dd — Xiper.net

Автор: Евгений Рыжков Дата публикации: 10.01.2009

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

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>

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

  • закрывающий тег обязателен в XHTML (</dd>)
  • должен располагаться внутри тега <dl>
  • обязательных атрибутов нет
  • может содержать CDATA, строчные и блочные элементы
  • разные браузеры умолчанию отображают тег <dd> по разному (для уравнивания отображения используйте таблицы стилей)

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

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

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

По теме

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

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