BBM Tutor
BBM Tutor

HTML5 Tag - <dd> Element

Definition & Uses of HTML5 <dd> Element

The HTML5 <dd> element existed in HTML 4, but it’s been repurposed in HTML5.

Syntax of HTML5 <dd> Tag

<dl>
<dt>Term/Name</dt>
<dd>Description of Term/Name</dd>
</dl>

What is HTML5 <dd> Element?

  • The <dd> tag represents the description, definition, or value, part of a term-description group in a description list (dl element).
  • The <dt> & <dd> pair constitutes an item in a description list (dl). While the <dt> contains the term to be defined, the <dd> section contains the description content.
  • In description lists ( <dl> ) a single term ( <dt> ) can have many descriptions or none at all. On the other hand, a description may have no term associated.
  • Inside a <dd> tag you can put HTML comments, Text content and Flow contents like paragraphs, line breaks, images, links, lists, etc.
  • A <dd> element must have a start tag and its end tag may be omitted if the dd element is immediately followed by another dd element or a dd element, or if there is no more content in the parent element.

Where to use HTML5 <dd> Tag?

  • The <dd> tag tag is used for specifying a description value in a description list.
  • The <dd> tag is used in conjunction with <dl> (defines a description list) and <dt> (defines description terms/names).
  • Use this <dd> element to explain the meaning of the content contained within the preceding dt element. This content can be formatted further using headings (h1, h2, etc.), paragraphs (<p>) and blockquotes, as well as Inline and Phrase Elements.

Tips & Notes

  • Note that the description term can be linked to more than one description.
  • Note that, for dl element both start and end tag are required. But for <dt> and <dd> end tag is optional.

Simple HTML5 Example

<!DOCTYPE HTML>
<html>
<head>
<title> HTML5 <dd> - HTML5 Tags Tutor </title>
</head>
<body>
<article>
<p>
<dl>
<dt>Windows</dt>
<dd>- Operating system designed by Microsoft. </dd>
<dt>Mac OS </dt>
<dd>- Operating system designed by Apple. </dd>
<dd>- Designed specially for Mac Computers. </dd>
<dt>Unix</dt>
<dd>- Multi-user operating system designed by Bell Laps. </dd>
<dd>- Available as Open Source. </dd>
<dd>- Examples of modern UNIX operating systems include IRIX (from SGI), Solaris (from Sun), Tru64 (from Compaq) and Linux (from the Free Software community). </dd>
<dt>Linux</dt>
<dd>- Unix like Operating system. </dd>
<dd>- Designed by Linus Torvalds. </dd>
</dl>
</p>
</article>
</body>
</html>

Output Screen

Windows
- Operating system designed by Microsoft.
Mac OS
- Operating system designed by Apple.
- Designed specially for Mac Computers.
Unix
- Multi-user operating system designed by Bell Laps.
- Available as Open Source.
- Examples of modern UNIX operating systems include IRIX (from SGI), Solaris (from Sun), Tru64 (from Compaq) and Linux (from the Free Software community).
Linux
- Unix like Operating system.
- Designed by Linus Torvalds.

Attributes

  • Attributes are the features added to a tag to provide the browser with more information about how the tag should appear or behave.
  • There are 3 type attributes a tag can have. They are Global Attributes, Event Attributes and Element-Specific Attributes.
  • The <dd> tag is also capable of supporting the Global Attributes and Event Attributes in HTML5.

Element-Specific Attributes

Attributes

Description

Simple HTML5 Example #2

<!DOCTYPE HTML>
<html>
<head>
<title> HTML5 <dd> - HTML5 Tags Tutor </title>
</head>
<body>
<article>
<p>
<h2>Chemical Elements </h2>
<dl>
<dt>NaCl</dt>
<dd>Sodium Chloride</dd>
<dt>N</dt>
<dd>Nitrogen</dd>
<dt>O</dt>
<dd>Oxygen</dd>
<dt>K</dt>
<dd>Potassium</dd>
<dt>P</dt>
<dd>Phosphorus </dd>
</dl>
</p>
</article>
</body>
</html>

Output Screen

Chemical Elements

NaCl
Sodium Chloride
N
Nitrogen
O
Oxygen
K
Potassium
P
Phosphorus

Simple HTML5 Example #3

<!DOCTYPE HTML>
<html>
<head>
<title> HTML5 <dd> - HTML5 Tags Tutor </title>
</head>
<body>
<article>
<p>
<dl>
<dt><dfn>HTML5</dfn></dt>
<dd>HTML 5 is the next revision of the Hypertext Markup Language (HTML), the standard programming language for describing the contents and appearance of Web pages. </dd>
<dt><dfn>PHP</dfn></dt>
<dd>PHP is a script language and interpreter that is freely available and used primarily on Linux Web servers. PHP, originally derived from Personal Home Page Tools, now stands for PHP: Hypertext Preprocessor, which the PHP FAQ describes as a "recursive acronym."</dd>
</dl>
</p>
</article>
</body>
</html>

Output Screen

HTML5
HTML 5 is the next revision of the Hypertext Markup Language (HTML), the standard programming language for describing the contents and appearance of Web pages.
PHP
PHP is a script language and interpreter that is freely available and used primarily on Linux Web servers. PHP, originally derived from Personal Home Page Tools, now stands for PHP: Hypertext Preprocessor, which the PHP FAQ describes as a "recursive acronym."

Simple HTML5 Example #4

Description list is also appropriate for marking up content metadata, such as information about our article HTML5 <dl> Tag.

<!DOCTYPE HTML>
<html>
<head>
<title> HTML5 <dd> - HTML5 Tags Tutor </title>
</head>
<body>
<article>
<p>
<dl>
<dt>Authors:</dt>
<dd>Bala</dd>
<dd>Yamuna</dd>
<dt>Editors:</dt>
<dd>BBM</dd>
<dt>Category:</dt>
<dd>Tutor </dd>
</dl>
</p>
</article>
</body>
</html>

Output Screen

Authors:
Bala
Yamuna
Editors:
BBM
Category:
Tutor

Simple HTML5 Example #5

In this example the form was designed using description list. Everyone use table to consolidate the form elements, but description list is best chioce for consolidation of webform. First we use the dl tag to hold the whole set of data, next we use dt (defines the term in the list) tag and dd (describes the term in the list) tag to hold the title and the data. We need to float the dt tag, so that the title for the form inputs will align to the left.

<!DOCTYPE HTML>
<html>
<head>
<title> HTML5 <dd> - HTML5 Tags Tutor </title>
<style type="text/css" >
dl {
margin-bottom : 50px;
}

dl dt {
background : #FF99CC;
color : #fff;
float : left;
font-weight : bold;
margin-right : 10px;
padding : 5px;
width : 100px;
}

dl dd {
margin : 2px 0;
padding : 5px 0;
}

</head>
<body>
<article>
<p>
<dl>
<dt>First Name</dt>
<dd><input type="text" name="fname" /></dd>
<dt>Last Name</dt>
<dd><input type="text" name="lname" /></dd>
<dt>DOB</dt>
<dd><input type="text" name="dob" /></dd>
<dt>Qualification</dt>
<dd><input type="text" name="quali" /></dd>
</dl>
</p>
</article>
</body>
</html>

Output Screen

First Name
Last Name
DOB
Qualification

Simple HTML5 Example #6

<!DOCTYPE HTML>
<html>
<head>
<title> HTML5 <dd> - HTML5 Tags Tutor </title>
</head>
<body>
<article>
<p>
<dl>
<dt>Abhi</dt>
<dd>Hai Kavi </dd>
<dt>Kavi</dt>
<dd>Hai Abhi </dd>
<dd>How are you?? </dd>
<dt>Abhi</dt>
<dd>Fine. How u?? </dd>
<dd>Wats Up ?? </dd>
<dt>Kavi</dt>
<dd>Fine. where are you? </dd>
</dl>
</p>
</article>
</body>
</html>

Output Screen

Abhi
Hai Kavi
Kavi
Hai Abhi
How are you??
Abhi
Fine. How u??
Wats Up ??
Kavi
Fine. where are you?
BBM Invoice
 
Disclaimer: Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy.