| 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
Редакторы: Влад Мержевич
Зачем использовать теги списков определений (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:3911 Ответов
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
Данные списка таблиц будут выглядеть следующим образом:
<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
Редакторы: Влад Мержевич
Списки определений. 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 | определяет направление символов:
|
| 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> Сделай код и жми тут