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

Leave a Comment / Разное / By /

HTML/Элемент dl

Синтаксис

(X)HTML

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

Описание

Элемент dl (от англ. «definition list» ‒ «список определений») является элементом-контейнером для списка определений. В данный элемент могут быть вложены такие элементы как dt (элемент термина) и dd (элемент определения).

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

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

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

Верс.Раздел
HTML
2. 0Definition List: DL, DT, DDПеревод
3.2Definition Lists
4.0110.3 Definition lists: the DL, DT, and DD elements
DTD: Transitional Strict Frameset
5.04.4.8 The dl element
5.14.4.8. The dl element
XHTML
1.0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1Extensible HyperText Markup Language

Атрибуты

compact
Устанавливает минимальное расстояние между элементами списка.
Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

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

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Элемент dl</title>
</head>
<body>
<h2>Пример с элементом «dl»</h2>
<dl>
<dt><b>Гипертекст</b></dt>
<dd>это ветвящийся или выполняющий действия по запросу текст</dd>
<dt><b>Тег языка разметки</b></dt>

<dd>это элемент языка гипертекстовой разметки</dd>
</dl>
</body>
</html>

Элемент dl

Список определений. Требуем невозможного. — Xiper

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

Рассмотрим примеры использования списка определений в случаях, когда кажется, что <dl> применить невозможно.

Заметка

Кто ищет в работе путей попроще, лучше пропустить этот материал. Тут я как сторонник логически правильной разметки буду себе ставить «странные» задачи и решать их.

Наименование и значение одной строкой

Требования:

  • сверстать с помощью dl, где наименование — это dt, a значение dd
  • наименование и значение могут иметь любую ширину
  • каждая следующая пара наименование-значение начинаются с новой строки
<dl>
	<dt>Год выхода:</dt>
	<dd>1998</dd>
	<dt>Жанр:</dt>
	<dd>ужасы, боевик, триллер, фэнтези</dd>
	<dt>Режиссер:</dt>
	<dd>Джон Карпентер</dd>
	<dt>В ролях:</dt>
	<dd>Джеймс Вудс, Дэниэл Болдуин, Шерил Ли, Томас Йен Гриффит, Максимилиан Шелл, Тим Джини, Марк Бун Джуниор, Грегори Сьерра</dd>
</dl>

Задача ясна, HTML код есть, колдуем в стилях (от Павел Сорокин):

dl {
	overflow: hidden;
}
dt {
	float: left;
	margin-right: 4px;
}

Демо пример. Проверено в:

  • IE 6-7
  • Firefox 3
  • Opera 9.5-10.5
  • Safari 4
  • Chrome 4

Недостаток

Если dd будут пустыми, тогда dt выстроятся в одну строку. Т.е. при таком решении нужна уверенность, что и dt, и dd будут заполнены.

Uptate by Надежда и Александр Головко. Это ограничение можно обойти, если задать для dt еще и clear:left. Однако Chrome и Opera по-прежнему не отображают список как задумано. dd, который идет после пустого «подскакивает» на уровень вверх. Чтобы побороть эту неприятность можно задать для dd минимальную высоту:

dl {
	overflow: hidden;
}
dt {
	float: left;
	margin-right: 4px;
	clear:left;
}
dd{
	min-height:15px;  /* высота строки, подбирается вручную */
}

Заметка

Вариант с dt, dd { diplay: inline} dd:after { content: «»;display:block; } оказался не рабочим в webkit-браузерах (спасибо за критику Vladimir).

Колонки анонсов новостей

Обыденная задача для верстальщика:

Задача становится не такой скучной, если попробовать ее сверстать семантически — через список определений, где дата будет тегом <dt>, а текст <dd>. Т.е.

<dl>
	<dt>18 мая </dt>
	<dd><a href="#">«Мастера связи» МГТС</a></dd>
	<dt>13 мая </dt>
	<dd><a href="#">МГТС ввела в эксплуатацию новую биллинговую систему FORIS Fix от СИТРОНИКС</a></dd>
	<dt>11 мая </dt>
	<dd><a href="#">ОАО МГТС на Связь-Экспокомм</a></dd>
</dl>

Через некоторое время пришел к такому решению:

dt {
	width: 200px; /* ширина колонки */
	float: left;
}
dd {
	width: 200px; /* ширина колонки */
	float: left;
	margin-top: 20px; /* высота блока с датой + отступ между датой и текстом */
	margin-right: 50px; /* расстояние между колонками */
	margin-left: -200px; /* ширина колонки */
}

Демо пример. Проверено в:

  • IE 6-7
  • Firefox 3
  • Opera 9.5-10.5
  • Safari 4
  • Chrome 4

Список определений в виде таблицы (update)

<dl>
	<dt>Green and Golden Bell Frog</dt>
	<dd>Nisl ut aliquip ex ea commodo consequat</dd>
	<dt>Bull Frog</dt>
	<dd>Lorem ipsum dolor sit amet elit... Lorem ipsum dolor sit amet elitLorem ipsum dolor sit amet elitLorem ipsum dolor sit amet elitLorem ipsum dolor sit amet elitLorem ipsum dolor sit amet elitLorem ipsum dolor sit amet elit</dd>
	<dt>Spotted frog</dt>
	<dd>Facilisis at vero eros et accumsan</dd>
</dl>

dl.table-display {
	width: 520px;
	margin: 50px 0 0 50px;
	border-bottom: 1px solid #999;
	float: left;
}
.table-display dt {
	clear: left;
	float: left;
	width: 120px;
	border-top: 1px solid #999;
	font-weight: bold;
	padding: 5px;
}
. table-display dd {
	padding: 5px;
	float: left;
	width: 380px;
	border-top: 1px solid #999;
}

Для IE6 и 7 добавляем вот это:

.table-display dd {
	float: none;
	width: auto;
	margin-left: 120px;
	border-top: 1px solid #999;
	zoom: 1; /* устраняет в многстрочном блоке смещение строк в IE */
}

А для IE6 езе и вот это:

.table-display dt { /* устраняем небольшие косяки в IE6 */
	width: 130px;  
	margin-right: -5px;
}

Демо пример. Проверено в:

  • IE 6-8
  • Firefox 3.6
  • Opera 10.5
  • Safari 4
  • Chrome 4

Вывод

Еще раз убедился в почти безграничных возможностях CSS.

8.3. Размечайте списки описаний с помощью и

8.3. Размечайте списки описаний с помощью
,
и
— AcceDe Web

перейти к содержанию Перейти к вторичному меню Версия Française

Вы находитесь здесь: Домашняя страница > Рекомендации AcceDe Web > Рекомендации по специальным возможностям HTML и CSS > 8. Списки > 8.3. Списки описаний разметки с помощью

,
и

Использовать

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

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

Примечание

Одно ключевое слово (тег

) может иметь несколько значений (теги
).

Пример с описанием события:

  
Конференция по веб-доступности
 
<дл>
   
Местоположение

   
Париж

   
Даты

   
Суббота, 7 сентября

   
Среда, 14 октября

   
Время

   
Начало в 10:00

Пример с глоссарием:

 <дл>
   
АРИЯ

   
Доступное многофункциональное интернет-приложение

   […]
   
WCAG

   
Рекомендации по доступности веб-контента

   […]

Каковы преимущества?

Структурирование списков необходимо для человек, использующих программу чтения с экрана (слепых или слабовидящих) .

Когда они сталкиваются со структурированным списком, они могут:

  • Переходить от списка к списку на странице.
  • Знать с самого начала количество элементов в списке.
  • Удобная навигация по списку:
    • Перейти прямо в конец списка, если они не заинтересованы в содержании.
    • Легко вернуться в начало списка.

Узнать больше

  1. Списки определений (Структура содержания).

Комментарии

Наверх

Торонто (Канада)
Телефон: + 1 902 200 1009
Электронная почта: contact@atalan.ca

Париж (Франция)
Телефон: +33 (0)1 45 26 77 89
Электронная почта: contact@atalan.fr

Веб-сайт: www.atalan.fr
Atalan в Twitter
Atalan в LinkedIn

  • СпособностьНет
  • AnySurf
  • АПФ Франция Гандикап
  • Ассоциация Валентина Гаюи (AVH)
  • СИГРЕФ
  • Фонд «Дизайн для всех»
  • ЭССЕК
  • Хандирект
  • Ханплой
  • Науки По
  • Телеком ParisTech
  • Помощь |
  • Карта сайта |
  • Юридическая информация |
  • Логин (онлайн-тренинги)

Как писать и размещать элементы в одной строке с помощью CSS?

Улучшить статью

Сохранить статью

  • Последнее обновление: 02 июн, 2020

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Теги

    и
    используются вместе в теге
    (определяет список описаний) в HTML для определения терминов или их описания. Тег
    используется для указания списка описаний. Тег
    обозначает описание определения и используется для обозначения описания или определения элемента в списке описаний. Тег
    используется для представления списка описаний. Этот тег используется с тегами
    и
    .

    Пример 1:  В этом примере используются теги

    и
    внутри тега
    , а содержимое
    и
    отображается в разных строках.
     

    HTML

    < html >

       

    < head >

         < title >

             Как записать элементы dt и dd

             в одной строке с помощью CSS?

         title >

       

         < style >

             dt {

                 font-weight: bold ;

                 цвет: зеленый;

    }

    DT :: After {

    Содержание: ":";

    }

    Стиль >

    HEAD >

    9000 . 0009    

    < body >

         < dl >

             < dt >Name dt >

             < дд >Криштиану Роналду дд >

    90 < 9 9000                                  dt >Date of birth dt >

             < dd >5 February 1985 (age 35) dd >

             < DT > Национальность DT >

    < DD > Португалия DD > >0003

             < dt >Profession dt >

             < dd >Footballer dd >

         < / DL >

    Body >

    HTML

    0010 >

    Выход:

    Пример 2: Этот пример использует

    и
    Tag в
    и отображение
    и
    содержимое в той же строке с помощью CSS.

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

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