Тег dl


Тег HTML список определений

Тег HTML используется для создания списка определений. Тег — контейнер списка определений.

Список, созданный с помощью тега , содержит пары «термин — описание».

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

Помимо списка определений в HTML можно создать маркированный список и нумерованный список.

Синтаксис

Отображение в браузере

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

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

Тег
Да Да Да Да Да

Атрибуты

Тег не имеет собственных атрибутов, поддерживает глобальные HTML атрибуты.

IT-блог о веб-технологиях, серверах, протоколах, базах данных, СУБД, SQL, компьютерных сетях, языках программирования и создание сайтов.

HTML теги. HTML списки. Тег DL

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Заметки по HTML и ее раздел HTML теги. Данная публикация посвящена HTML тегу . Описание тега , атрибуты тега , синтаксис тега , пример использования тега . Тег относится к группе тегов HTML списков.

HTML тег . Описание

HTML тег – относится к тегам предназначенным для формирования HTML списков. Тег предназначен для формирования списков определений в HTML. Сам по себе тег бесполезен, без еще двух тегов, относящихся к спискам определений: и .

Вместе теги , , формируют списки определений. Тег формирует сам список, тег служит для записи определения термина, а контейнер предназначен для отображения самого термина.

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

Тег . Синтаксис тега

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

Тег dl

Описание тега DL

Тег входит в группу тегов , и , предназначенных для создания списка определений.

Тег создает список; тег задает термин, а тег задает определение заданного термина.

Атрибуты тега DL

Пример — теги dd, dl и dt

Илон Маск рекомендует:  Direct draw термины и концепции directdraw api


«-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd» >

«Content-Type» content= «text/html; charset=windows-1251» >
Теги , и

Термин 1
Определение термина 1
Термин 2
Определение термина 2
Термин 3
Определение термина 3

Тег DL

Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 6.0 7.0 8.0 7.0 8.0 9.0 1.0 1.7 1.0 2.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да
HTML: 3.2 4 XHTML: 1.0 1.1

Описание

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

Синтаксис

Термин 1
Определение термина 1

Термин 2
Определение термина 2

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

Пример 1. Использование тега

GIF
Формат графических файлов, широко применяемый при создании сайтов. GIF использует 8-битовый цвет и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения.

JPEG
Популярный формат графических файлов, широко применямый при создании сайтов и хранения изображений. JPEG поддерживает 24-битовый цвет и сохраняет яркость и оттенки цветов в фотографиях. Данный формат называют сжатием с потерями, поскольку алгоритм JPEG выборочно отвергает данные. Метод сжатия может исказить деталь в рисунке, особенно содержащий текст или изображение с четкими краями. Формат JPEG не поддерживает прозрачность, когда вы сохраняете фотографию в формате JPEG, прозрачные пиксели заполняются определенным цветом.

HTML тег

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

Синтаксис

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

Атрибуты

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

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

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

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

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

Тег dl

Описание тега DL

Тег входит в группу тегов , и , предназначенных для создания списка определений.


Тег создает список; тег задает термин, а тег задает определение заданного термина.

Атрибуты тега DL

Пример — теги dd, dl и dt

«-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd» >

«Content-Type» content= «text/html; charset=windows-1251» >
Теги , и

Термин 1
Определение термина 1
Термин 2
Определение термина 2
Термин 3
Определение термина 3

Тег (Definition List) служит для создания списка определений. Списки состоят из двух частей: определения (DT) и описания (DD). Обязательных атрибутов нет. Закрывающий тег обязателен.

Атрибуты title Показывает текст в виде всплывающей подсказки contentEditable Возможность редактирования NOWRAP Запрещает перенос текста. «false» (по умолчанию) — разрешает перенос, «true» — запрещает. innerText Устанавливает или получает текст между начальным и закрывающим тегом объекта Пример:

Списки html: теги ul, ol, li, dl, dd, dt

Здравствуйте, уважаемые читатели! Сегодня в качестве продолжения цикла статей рубрики «Основы html» я хочу познакомить вас с алгоритмом создания списков html при помощи тегов ul и li (маркированный список), ol и li (нумерованный список), dl, dt, dd (список определений).

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

Маркированные HTML списки — теги ul и li

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

  • 1 элемент маркированного списка
  • 2 элемент маркированного списка
  • 3 элемент маркированного списка

По умолчанию внешний вид маркера представляется закрашенным кружком. Однако, можно изменить его внешний вид, применив атрибут type, который имеет следующие значения: disc, circle, square. Значение disc (которое определяет внешний вид маркера в виде закрашенного кружка) применяется по умолчанию. То есть если атрибут type не прописан, то внешний вид маркера будет выглядеть как закрашенный кружок. Если дополнить данными атрибутами тег ul, то получим следующие варианты:

  • 1 элемент маркированного списка
  • 2 элемент маркированного списка
  • 3 элемент маркированного списка
  • 1 элемент маркированного списка
  • 2 элемент маркированного списка
  • 3 элемент маркированного списка
  • 1 элемент маркированного списка
  • 2 элемент маркированного списка
  • 3 элемент маркированного списка

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

  • 1 элемент маркированного списка
  • 2 элемент маркированного списка
  • 3 элемент маркированного списка

Нумерованные HTML списки — теги ol и li

Теперь посмотрим, как образуется нумерованный список с помощью тегов ol (блочный и парный тег по аналогии с ul). В качестве тега, определяющего элементы нумерованного списка html, здесь тоже выступает тег li. Нумерованный список — совокупность пронумерованных элементов. Тип нумерации определяется атрибутом type, который может принимать следующие значения:

  • A — заглавные латинские буквы;
  • a — строчные латинские буквы;
  • I — заглавные римские цифры;
  • i — строчные римские цифры;
  • 1 — арабские цифры
  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка


  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка
  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка
  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка
  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка

Также можно обеспечить нумерованный список, где нумерация элементов осуществляется в обратном порядке, например: 3, 2, 1. Это осуществляется с помощью атрибута reserve тега ol.

  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка

Существует также возможность начать маркированный список не с 1, а с любого другого числа. Для этого можно воспользоваться атрибутом start, причем совершенно не важно, какое значение атрибута type установлено. Посмотрите пример использования атрибута name в совокупности с различными значениями атрибута type (1 и I):

  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка
  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка

HTML списки определений — теги dl, dd, dt

Еще один вид списков html — список определений. Он формируется следующим образом. Содержание этого списка заключается между открывающим и закрывающим тегами dl, которые образуют контейнер. Тег dt определяет какой-либо термин, а dd — описание этого термина.

CMS Система управления контентом,
которая применяется для создания сайтов. HTML Язык гипертекстовой разметки,
являющийся основой создания вебресурсов.

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

Кстати, современные реалии таковы, что язык html нельзя рассматривать в отрыве от css, поэтому, чтобы не пропустить эти важнейшие материалы, подпишитесь на обновление блога через RSS-ленту либо по e-mail. На этом тема сегодняшней статьи исчерпана, если вы получили необходимую информацию, не откажитесь воспользоваться кнопками социальных сетей.

Семантические табы из dl/dt/dd без скриптов

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

Под катом одно из возможных решений.

Основная особенность разметки — «обертка» wrapper’ом:

Без этого не просто побороть отсекание выносных кнопок необходимым overflow. Возможно, есть способы избавиться от этого лишнего div’a псевдоэлементами или еще какими-нибудь танцами, но я после сегодняшних мучений остановился на текущем варианте.

Css без декораций выглядит так:

Это все. Немного приукрашенную рабочую версию можно пощупать на jsfiddle
При позиционировании обратите внимание на то, что заголовки табов находятся за пределами контейнера.

Тег (Definition List) служит для создания списка определений. Списки состоят из двух частей: определения (DT) и описания (DD). Обязательных атрибутов нет. Закрывающий тег обязателен.

Атрибуты title Показывает текст в виде всплывающей подсказки contentEditable Возможность редактирования NOWRAP Запрещает перенос текста. «false» (по умолчанию) — разрешает перенос, «true» — запрещает. innerText Устанавливает или получает текст между начальным и закрывающим тегом объекта Пример:

Илон Маск рекомендует:  Шаблон сайта визитки 5 страниц, HTML, CSS, JS
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL