HTML5 Defination List dl,dt,dd tags and elements
In this article I am going to describe about the use of dl,dt and dd tags in HTML5.
Defination List
Basically a definition list is composed of three HTML elements and some text. These are the <dl>, <dt> and <dd> elements.
<dl> Tag
<dl> tag is used to define a list. A definition list is the container element for DT and DD elements. The DL element should be used when you want incorporate a definition of a term in your document, it is often used in glossaries to define many terms, it is also used in "normal" documents when the author wishes to explain a term in a more detail.
<dt> Tag
<dt> tag is used to define the item in the list. The term currently being defined in the definition list. This element contains inline data. You can also use a <dt> tag within <details> and <figure> tags to represent a caption for content.
<dd> Tag
The definition description element contains data that describes a definition term. This data may be either inline, or it may be block level. You can put paragraphs, line breaks, images, links, lists, etc. inside the <dd> tag. This tag is used to describe an item in a defination list.
Note : For dl element both start and end tag are required. But for <dt> and <dd> end tag is optional.
Browser Support
It is supported in all major browsers.
Syntax
<dl>
<dt></dt>
<dd></dd>
</dl>
Can Contain
| Element |
Can contain |
| dl |
One or more DT and DD elements. |
| dt |
Inline Elements |
| dd |
Inline as well as block-level elements. |
Can reside within
| Elements |
Can reside within |
| dl |
APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH. |
| dt |
DL |
| dd |
DL |
Example of DL,DD,DT Tags in HTML5
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title><Dd> Tag in HTML5</title>
</head>
<body>
<h1>Implementation of Dd tag in HTML5</h1>
<h4>Example 1</h4>
<dl>
<dt>Cricket Team Players</dt>
<dd>Batsman</dd>
<dd>Bowler</dd>
<dd>Wicket Keeper</dd>
<dd>Fielder</dd>
<dd>Allrounder</dd>
</dl>
<h4>Example 2</h4>
<dl>
<dt>Programming Languages</dt>
<dd>C</dd>
<dd>Java</dd>
<dd>Oracle</dd>
<dd>Asp.Net</dd>
<dd>PHP</dd>
</dl>
</body>
</html>
Output
