W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++


dl ... ⁄dl


Share it

dl intro dl browser display dl parents - children dl syntax

HTML5 dl element

The dl element allows you to mark up a description list organized in name-value pairs ⁄ associations ⁄groups or term-description groups: »video

About dl

Display & support dl

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children dl

Attributes dl

Syntax dl

1<dl> ... </dl> »video

Attributes and Values dl (comma separated)

<dlattribute="attribute_value(s)"> Video Examples
1. specific attributes
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<dl accesskey="h"> ... </dl>
2.class=class name»html »img<dl class="class_name"> ... </dl>
3.contenteditable="",  , true, false »html<dl contenteditable="true"> ... </dl>
4.contextmenu=menu id value»html<dl contextmenu="menu_id_value"> ... </dl>
5.data-*= value -<dl data-http-error="404"> ... </dl>
6.dir=ltr, rtl, auto»html<dl dir="ltr"> ... </dl>
7.draggable= true,  , false»img<dl draggable="false"> ... </dl>
8.dropzone= copy, move, link, string:, file: -<dl dropzone="copy"> ... </dl>
9.hidden= "",  , hidden»html »img<dl hidden="hidden"> ... </dl>
10.id=id name»html »img<dl id="unique_id_name"> ... </dl>
11.itemid= URL --
12.itemprop= string »link »a-
13.itemref= string --
14.itemscope= "",  , itemscope--
15.itemtype= absolute URL --
16.lang=language code »html »head»title »img<dl lang="en"> ... </dl>
17.spellcheck="",  , true, false»html<dl spellcheck="true"> ... </dl>
18.style=CSS property:value»html »img<dl style="color:red"> ... </dl>
19.tabindex= integer »img<dl tabindex="3"> ... </dl>
20.title=text»html »link»style »abbr»dfn
»img »meter
<dl title="html page"> ... </dl>
21.translate="", yes, no»html »img<dl translate="yes"> ... </dl>
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration dl element

HTML5 dl element: mark up a description list

min video details
00:00 video tutorial: dl tag
00:06 the dl element allows you to mark up a description list containing pairs / groups or associations of names/terms/.. and their corresponding value /description/definition...
00:27 for example H Hydrogen can be considered an associated term-description pair or group
00:33 where H represents the term (symbol) and can be marked up using the dt element
00:38 and Hydrogen represents the associated description of the H term, and can be marked up using dd element
00:47 the same for the rest:
C, se
represent terms (symbols) and will be marked up with dt element

Carbon, Selenium
represent the associated description of th above terms, and will be marked up with the dd element
01:05 → these terms and their description form a description list: dl
01:20 term(dt) - description (dd) pairs grouped in a description list (dl)
01:28 note1 :
dt and dd closing tags have been omitted: <⁄dt>, <⁄dd>

video tutorial on dt tag omission here
video tutorial on dd tag omission here
01:37 note2:
H element (just like C and Se) represents an abbreviation and can be marked using abbr element like this:
<dt> <abbr> H <⁄abbr> <⁄dt>

For more information about the dl element, please see the specs: W3CWHATWG