Understanding HTML Description Lists
An HTML description list groups terms with one or more related descriptions.
Description lists use the <dl> element as the container, <dt> elements for terms or names, and <dd> elements for their descriptions or values.
Description List Syntax
A description list begins with the <dl> element. Each term is placed inside a <dt> element, followed by one or more <dd> elements containing the related description or value.
<dl>
<dt>HTML</dt>
<dd>The markup language used to structure webpages.</dd>
<dt>CSS</dt>
<dd>The style sheet language used to control presentation.</dd>
</dl>Unlike unordered and ordered lists, description lists do not use <li> elements.
The <dl> Element
The <dl> element represents the complete description list and contains the terms and their associated descriptions.
<dl>
<dt>Browser</dt>
<dd>Software used to view and interact with webpages.</dd>
</dl>The <dl> element provides the overall structure for the relationships between the terms and their descriptions.
The <dt> Element
The <dt> element represents a term, name, or other item that is being described within the description list.
<dt>HTML</dt>A <dt> is normally followed by one or more <dd> elements containing information associated with that term.
The <dd> Element
The <dd> element provides the description, definition, value, or other information associated with a preceding <dt> term.
<dt>CSS</dt>
<dd>A language used to control the presentation of HTML documents.</dd>A description list does not have to be a dictionary. The relationship may also represent names and values, questions and answers, metadata, or other paired information.
Multiple Descriptions for One Term
A single term can be followed by more than one <dd> element when several descriptions or values apply to the same term.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dd>Used to structure webpage content.</dd>
</dl>Both descriptions are associated with the same <dt> term.
Multiple Terms for One Description
More than one <dt> element can appear before a <dd> when the same description applies to multiple terms.
<dl>
<dt>JPEG</dt>
<dt>JPG</dt>
<dd>Common filename extensions for the JPEG image format.</dd>
</dl>This structure is useful when different names or terms share the same description.
When to Use a Description List
Use a description list when the content consists of terms and related descriptions or names and associated values. Common examples include glossaries, metadata, product specifications, frequently asked questions, and lists of labels with related information.
If the content is simply a sequence or collection of independent items, an ordered or unordered list is usually more appropriate.
HTML Description List Example
The following example pairs several web terms with their descriptions. Edit the terms or descriptions, add another pair, or give one term multiple descriptions to see how the structure works.
Description List Best Practices
- Use
<dl>when the content contains meaningful term-description or name-value relationships. - Use
<dt>for the term or name being described. - Use
<dd>for the related description, definition, or value. - Do not use
<li>elements inside a description list. - Use multiple
<dd>elements when a term has more than one associated description. - Use multiple
<dt>elements when several terms share the same description. - Choose ordered or unordered lists instead when the content does not represent term-description relationships.
Summary
The HTML <dl> element creates a description list, <dt> identifies each term or name, and <dd> provides the related description or value. A term can have multiple descriptions, and multiple terms can share the same description, making description lists useful for many kinds of paired information.