Html dl: Тег | htmlbook.ru — Вебджем.рф | Создание и продвижение сайтов

Содержание

: Элемент списка описаний — HTML

HTML-элемент <dl> (от англ. Description List) представляет собой список описаний. Этот элемент служит контейнером для списка пар терминов (определяемых элементом <dt>) и их описаний (определяемых элементами <dd>). Этот элемент обычно используют при создании глоссария или для отображения метаданных (списка пар ключ-значение).

Категории контента	Потоковый контент, и если потомки элемента `<dl>` включают одну группу имя-значение явный контент.
Разрешённое содержимое	Либо: Ноль или более групп каждая из которых состоит из одного или более элементов `<dt>` за которым следует один или более элементов `<dd>`, необязательно смешанных с элементами `<script>` и `<template>`. Либо: Один или более элементов `<div>` , необязательно смешанных с элементами `<script>` и `<template>`.
Пропуск тегов	Нет, открывающий и закрывающий теги обязательны.
Разрешённые родители	Любой элемент который принимает потоковый контент.
Разрешённые ARIA-роли	`group`, `presentation`
DOM-интерфейс	`HTMLDListElement` (en-US)

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

Одиночные термин и определение

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform,
    graphical web browser developed by the
    Mozilla Corporation and hundreds of
    volunteers.
  </dd>
  <!-- Other terms and descriptions -->
</dl>

Множественные термины с одним определением

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    A free, open source, cross-platform,
    graphical web browser developed by the
    Mozilla Corporation and hundreds of
    volunteers.
  </dd>
  <!-- Other terms and descriptions -->
</dl>

Одиночный термин со множественными определениями

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform,
    graphical web browser developed by the
    Mozilla Corporation and hundreds of
    volunteers.
  </dd>
  <dd>
    The Red Panda also known as the Lesser
    Panda, Wah, Bear Cat or Firefox, is a
    mostly herbivorous mammal, slightly larger
    than a domestic cat (60 cm long).
  </dd>
  <!-- Other terms and descriptions -->
</dl>

Множественные термины и определения

Кроме того, можно определить несколько терминов с несколькими соответствующими определениями, путём комбинирования приведённых выше примеров.

Метаданные

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

<dl>
  <dt>Name</dt>
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>

Подсказка: Может быть полезно задать разделитель для пары ключ-значение при помощи CSS3, например:

dt:after {
  content: ": ";
}

Оборачивание групп имя-значение в

<div> элементы

WHATWG HTML разрешает оборачивать каждую группу имя-значение в элементе <dl> в элемент <div>. Это может быть полезно, когда используются микроданные (en-US) или когда глобальные атрибуты применяются к целой группе, или для стилевых целей.

<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>

Не используйте данный элемент (как и элемент <ul>) просто для создания отступов на странице. Не смотря на то, что это работает, — это является плохой практикой и подменяет семантическое значение списка определений.

Чтобы изменить отступ определений терминов, воспользуйтесь CSS — свойством margin.

Каждый скринридер произносит содержимое элемента <dl> по-разному. Некоторые скринридеры, такие как VoiceOver на iOS, не будут озвучивать, что содержимое

<dl> это список. В связи с этим, убедитесь, что содержимое каждого элемента списка написано таким образом, что оно сообщает о своём отношении с другими элементами списка в списке группы.

CodePen — HTML Buddies: dt & dd

Specification
HTML Standard # the-dl-element

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.

Элемент <dt>
Элемент <dd>

Last modified: 7 нояб. 2022 г., by MDN contributors

| 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. Вид списка описаний

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

Спецификация	Статус
WHATWG HTML Living Standard	Живой стандарт
HTML5	Рекомендация
HTML 4. 01 Specification	Рекомендация

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

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

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.

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

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

Браузеры


3	12	1	2	1	1


1	1	6	1

Браузеры

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

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

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

Списки

См. также

<dd>

<dt>
Создание списков
Списки
Список описаний
Текст в HTML

Практика

Последовательность элементов
Список описаний

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

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

Последнее изменение: 09. 10.2018

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

&двоеточие; Элемент списка описаний — HTML: Язык гипертекстовой разметки

HTML-элемент

) и описаний (предоставленных элементами

). Обычно этот элемент используется для реализации глоссария или отображения метаданных (списка пар ключ-значение).

Категории контента

Категории контента	Содержимое потока, и если дочерние элементы включают один имя-значение группа, ощутимое содержание.
Разрешенный контент	Либо: ноль или более групп, каждая из которых состоит из одного или более элементов, за которыми следует один или несколько элементов, опционально смешанных с `<скрипт>` и `<шаблон>` элементов. Или: (в WHATWG HTML, W3C HTML 5.2 и позже) Один или несколько `элементов` , опционально смешанный с `Рубрики Css Html Js Адаптивный сайт Верстка Идеи С чего начать Советы Шаблоны Разное` `© КомпанияВебджем.рф2009-2024\|Все права защищены.`

Содержимое потока, и если дочерние элементы

включают один имя-значение группа, ощутимое содержание.

Разрешенный контент

Либо: ноль или более групп, каждая из которых состоит из одного или более

элементов, за которыми следует один или несколько

элементов, опционально смешанных с <скрипт> и <шаблон> элементов.

Или: (в WHATWG HTML, W3C HTML 5.2 и позже) Один или несколько элементов

, опционально смешанный с

 
Рубрики
Css
Html
Js
Адаптивный сайт
Верстка
Идеи
С чего начать
Советы
Шаблоны
Разное