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++

dfn ... ⁄dfn

Share it

dfn intro dfn browser display dfn parents - children dfn syntaxdfn title attribute

HTML5 dfn element

The dfn element allows you to mark up a definition term. »video

About dfn

Display & support dfn

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children dfn

Attributes dfn

Observation: title attribute (part of global attributes) if present on dfn element, has a different semantic »video

Syntax dfn

1<dfn> ... </dfn> »video

Attributes and Values dfn (comma separated)

<dfnattribute="attribute_value(s)"> Video Examples
1. specific attributes
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<dfn accesskey="h"> ... </dfn>
2.class=class name»html »img<dfn class="class_name"> ... </dfn>
3.contenteditable="",  , true, false »html<dfn contenteditable="true"> ... </dfn>
4.contextmenu=menu id value»html<dfn contextmenu="menu_id_value"> ... </dfn>
5.data-*= value -<dfn data-http-error="404"> ... </dfn>
6.dir=ltr, rtl, auto»html<dfn dir="ltr"> ... </dfn>
7.draggable= true,  , false»img<dfn draggable="false"> ... </dfn>
8.dropzone= copy, move, link, string:, file: -<dfn dropzone="copy"> ... </dfn>
9.hidden= "",  , hidden»html »img<dfn hidden="hidden"> ... </dfn>
10.id=id name»html »img<dfn id="unique_id_name"> ... </dfn>
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<dfn lang="en"> ... </dfn>
17.spellcheck="",  , true, false»html<dfn spellcheck="true"> ... </dfn>
18.style=CSS property:value»html »img<dfn style="color:red"> ... </dfn>
19.tabindex= integer »img<dfn tabindex="3"> ... </dfn>
20.title=text»html »link»style »abbr»dfn
»img »meter
<dfn title="html page"> ... </dfn>
21.translate="", yes, no»html »img<dfn translate="yes"> ... </dfn>
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 dfn element

HTML5 dfn element: mark up a definition term

min video details
00:00 video tutorial: dfn element
00:05 dfn element allows you to mark a term that is going to be defined next (a definition term)
00:12 for example, if you want to define the IP term, you need to mark it properly using the dfn element
00:20 followed next by its definition
00:23 since this content represents a paragraph, we can mark it properly using p element
00:37 the term that is being defined (IP) and its definition
00:43 in this case the defined term, IP, represents the abbreviation for Internet Protocol, thus we can mark it using abbr element

abbr nested inside dfn, dfn nested inside p
00:53 no change in display
00:56 defining an abbreviated term is one case, but just as well we can use the extended form of IP, in which case we don't need the abbr element anymore

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