HTML <dd> - More Than Just A Definition Description

 

ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.


If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)


PDF mobile

The <dd> Tag for a Detail Description

Formerly the Definition Description element

The <dd> detail description tag is used to code the description of an item inside a dl element for a description list. Note that in previous versions of HTML these were called definition description and definition list respectively. However, since the purpose of the HTML <dfn> tag is to code a definition, the <dd> tag in HTML 5 by itself does not identify the definition of a term.

When displayed with its normal style, the flow content of the dd element is indented under the phrasing content of the dt element for the description term (formerly definition term) before it:

Term: <dl> tag
Definition: The <dl> tag is used to code a description list consisting of description terms alternating with groups of one or more detail descriptions.
Term: <dt> tag
Definition: The <dt> tag is used to code a description term in a description list, leading into one or more detail description elements.
Term: <dd> tag
Definition: The <dd> detail description tag is used to code the description of an item inside a dl element for a description list.

This is an actual working example of the <dd> tag example code below. In most HTML 5 browsers such as Firefox and Opera, the text inside the dfn element will be in an italic font, except for WebKit browsers such as Chrome and Safari which display it in an upright font.


<dd> Tag Syntax

Rules for coding HTML dd elements
<body>
   ... flow content expected ...
   <dl>
      ...
      <dt>... phrasing content ...</dt>
      <dd>
         ... flow content ...
      </dd>
      ...
   </dl>
   ...
</body>

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

  1. Inside a dl element, code one or more dd elements.
  2. Begin each dd element with a starting <dd> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
  3. Inside the dd element, between the <dd> starting tag and the </dd> ending tag, code the inner HTML flow content for the definition description.
  4. When marking up a dd element with editing tags (<ins> or <del>), code the <ins> tag or <del> tag inside the <dd> tag.
  5. End the dd element with a matching </dd> closing tag.
<dd> Content Model
Content of the dd element

The content of the dd element can include HTML comments, text content and any tags that can be used in flow content.


<dd> Tag Attributes

Attributes of the <dd> tag
global attributes In addition to the personal attributes of the <dd> tag below, any of the common HTML attributes can also be coded.

<dd> Tag Examples

Examples of the dd tag in HTML 5
Example of the <dd> tag in a list of definitions
(see <dd> tag demo above)

Here is an example of how to code a glossary of some HTML terms and their definitions.

<dl>
   <dt>Term: <dfn>&lt;dl&gt; tag</dfn></dt>
   <dd>Definition: The &lt;dl&gt; tag is used to code a description list consisting
   of description terms alternating with groups of one or more detail descriptions.</dd>
   <dt>Term: <dfn>&lt;dt&gt; tag</dfn></dt>
   <dd>Definition: The &lt;dt&gt; tag is used to code a description term
   in a description list, leading into one or more detail description elements.</dd>
   <dt>Term:  <dfn>&lt;dd&gt; tag</dfn></dt>
   <dd>Definition: The &lt;dd&gt; detail description tag is used to code the
   description of an item inside a <b>dl</b> element for a description list.</dd>
</dl>

Note that since the <dl> tag, <dt> tags and <dd> tags do not indicate that this is a list of terms and their definitions, each term is coded inside a dfn element.


Changes in HTML 5 - <dd> Tag

What's new in HTML 5
Differences between HTML 5 and earlier versions of HTML

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the dd element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.


Valid HTML 5