dt в HTML


Содержание

HTML тег

Элемент (от англ. «definition term» ‒ «термин определения») обозначает термин из списка определений.

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

Синтаксис

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

Атрибуты

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

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

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

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

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

в HTML

Тег входит в один из тегов, создающих списки определений. Данный элемент содержит название термина. Остальные два, это — является контейнером для списка, и — содержит описание термина.

Также, эти теги можно применять для описания диалогов, где содержит имя говорящего, а — его слова.

Атрибуты

Личные атрибуты: нет.

  • accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
  • class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
  • dir — указывает направление текста внутри элемента.
  • id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
  • lang — указывает язык, на котором написан текст внутри HTML-элемента.
  • style — необходим для применения встроенных стилей CSS к тегу.
  • tabindex — устанавливает порядок табуляции между элементами (клавиша Tab ).
  • title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Модель тега: может располагаться внутри элемента .

Может содержать: inline-теги, обычный текст и спецсимволы HTML (мнемоники).

Открывающий тег: необходим. Закрывающий тег: не обязателен.

Тег dt

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

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

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

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

Пример — теги 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

Тег dt

Тег (англ. define term — определяемый термин) — тег-контейнер, используется при создании списка определений вместе с и . Задает название термина.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

Атрибуты

class определяет имя используемого класса
dir определяет направление символов:
  • ltr — слева направо
  • rtl — справа налево
id уникальный идентификатор
lang определяет язык отображаемого документа
onclick щелчок на элементе
ondblclick двойной щелчок на элементе
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
style задает встроенную таблицу стилей
title всплывающая подсказка

Пример

Создаем список определений

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

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

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

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

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

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

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

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

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

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

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

: Термин для определения

На этой странице

Последующий элемент (от англ. Description Details) предоставляет подробности или определение предшествующего термина ( ) в списке определений ( ).»> (от англ. Description Details) предоставляет определение или другой связанный текст, относящийся к термину, указанным с помощью .

Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с https://github.com/mdn/interactive-examples и отправьте нам pull request.

Категории контента Нет
Разрешённое содержимое Потоковый контент, но без потомков представляет собой вводный контент, обычно группу вводных или навигационных средств. Он может содержать другие элементы-заголовки, а также логотип, форму поиска, имя автора и другие элементы.»> , представляет собой нижний колонтитул (футер, подвал) для своего ближайшего секционного контента или секционного корня. Футер обычно содержит информацию об авторе раздела, информацию об авторском праве или ссылки на связанные документы.»> , секционного контента или заголовочного контента.
Пропуск тегов Открывающий тег обязателен. Конечный тег может быть опущен, если за этим элементом непосредственно следует другой элемент или (от англ. Description Details) предоставляет подробности или определение предшествующего термина ( ) в списке определений ( ).»> , или если в родительском элементе нет больше содержимого.
Разрешённые родители Перед элементом который определяет термин в описании или списке определений, как таковой должен использоваться внутри элемента .»> или (от англ. Description Details) предоставляет подробности или определение предшествующего термина ( ) в списке определений ( ).»> , внутри (от англ. Description List) представляет собой список описаний. Этот элемент служит контейнером для списка пар терминов (определяемых элементом ) и их описаний (определяемых элементами ). Этот элемент обычно используют при создании глоссария или для отображения метаданных (списка пар ключ-значение).»> или (в WHATWG HTML) элемента ) является универсальным контейнером для потокового контента. Он не влияет на контент или макет до тех пор, пока не будет стилизован с помощью CSS.»>

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

Разрешённые ARIA-роли Нет
DOM-интерфейс HTMLElement До Gecko 1.9.2 (Firefox 4) включительно, Firefox реализует HTMLSpanElement интерфейс для этого элемента.

Аттрибуты

Этот элемент включает только глобальные аттрибуты.

Пример

Для примера можно использовать образец для элемента.

12 HTML & with CSS

Collection of free HTML and CSS & code examples (with little JS).

Author

  • Halida Astatin
  • June 4, 2020

Made with

  • HTML / CSS / JavaScript

About the code

Accordion using definition lists. Trending Words taken from dictionary.com.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, jquery.js

Author

  • Kenneth Alvares
  • June 2, 2020

Made with


  • HTML / CSS (Sass) / JavaScript

About the code

Writer’s Unblock with HTML & Tags

When you load the page, you will see two completely random and unrelated English words appear on the screen. Use these word prompts to get your creative juices flowing and get an idea for a story, poem, or some other form of content. If you want a new prompt, just click «new words» and a fresh prompt will appear.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Списки 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. На этом тема сегодняшней статьи исчерпана, если вы получили необходимую информацию, не откажитесь воспользоваться кнопками социальных сетей.

HTML Tag

The HTML tag represents a definition term in a description list (also known as an «association list» and «definition list»).

In a description list, each list item contains two or more entries; a term ( dt ) and a description ( dd ).

Note that a definition term can be linked to more than one description. There can also be multiple terms for a single description (for example, in the case where there are multiple spellings of a term being defined). In this case, each term must be enclosed in its own set of dt tags (there shouldn’t be any more than one term within a single dt element).

Also note that the dt element does not indicate that its contents are a term being defined, but this can be indicated using the dfn element.

Syntax

The tag is written as with the definition term inserted between the start and end tag.

The tag must be used inside a element and must come before the element/s that is/are associated with it.

Examples

Basic tag usage

Here’s an example of a basic description list.

Using dfn to Define a Term

The dt element does not indicate that its contents are a term being defined. To indicate the defining instance of a term, use the dfn element.

Multiple Terms

Here’s an example of using multiple elements for a single element.

Multiple Descriptions

You can have more than one element for each element (any given term could have multiple definitions). Each element provides a separate description.

Nested Lists

You can have nested description lists if your descriptions are more complex. You can also have paragraphs and other elements.

In fact, the element can contain «flow content» so you can nest most other elements inside the element («flow content» refers to most HTML elements that can appear within the of an HTML document).

Here’s an example of a description list that contains a

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The element accepts the following attributes.

Element-Specific Attributes

This table shows the attributes that are specific to the tag/element.

Attribute Description
None

Global Attributes

The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the tag , as well as with all other HTML tags.

  • accesskey
  • class
  • contenteditable
  • contextmenu
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • inert
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain «event» occurs. Each event handler content attribute deals with a different event.

Below are the standard HTML5 event handler content attributes.

Again, you can use any of these with the element, as well as any other HTML5 element.

  • onabort
  • oncancel
  • onblur
  • oncanplay
  • oncanplaythrough
  • onchange
  • onclick
  • oncontextmenu
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragexit
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • onemptied
  • onended
  • onerror
  • onfocus
  • onformchange
  • onforminput
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onload
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onmousewheel
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onreadystatechange
  • onscroll
  • onseeked
  • onseeking
  • onselect
  • onshow
  • onstalled
  • onsubmit
  • onsuspend
  • ontimeupdate
  • onvolumechange
  • onwaiting

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Differences Between HTML 4 & HTML 5

None. Although note that the HTML5 specification refers to the lists as «association lists» and «description lists», whereas HTML 4 referred to them as «definition lists».

To see more detail on the two versions see HTML5 Tag and HTML4 Tag. Also check out the links to the official specifications below.

Template

Here’s a template for the tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don’t need.

Note that the element does not actually have any local attributes (i.e. attributes that are specific to the element), but the following global attributes and event handlers are available to the element (and all other HTML elements).

For more information on attributes for this tag, see HTML5 Tag and HTML4 Tag.

Tag Details

For more details about the tag, see HTML5 Tag and HTML4 Tag.

Specifications

Here are the official specifications for the element.

What’s the Difference?

W3C creates «snapshot» specifications that don’t change once defined. So the HTML5 specification won’t change once it becomes an official recommendation. WHATWG on the other hand, develops a «living standard» that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.

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

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

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

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

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

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

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

Илон Маск рекомендует:  Интерактивные курсы в HTML Academy
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL