The description list is slightly “new” to HTML 5. I say new, in that previous to HTML 5, it was called a “definition list” and now it is a description list. The same tags are used, just the name changed.
The description list is the least used of the list containers for two reasons. First, and this is personal conjecture, I think that most of the WYSIWYG editors don’t readily or easily support the description list tag set. This is a shame, as it is a versatile and useful set of tags. Second, it is a set of tags which works slightly different than the other list tags, and not everyone wants to learn to use it.
However, when you see how easy it is to use, I’m sure you’ll be looking for ways to use it.
The description list uses three tags instead of two. First is a container for the list, the <dl> tag. This and its matching closing tag will contain the entire list.
The part that makes it different is that list items are actually made up of two separate tags, a name/term tag <dt> and a description tag <dd>.
Each <dt> should be followed by a matching <dd> tag set. There is nothing that says that a browser won’t display a <dt> tag without a matching <dd> tag, but you should work to incorporate all matched pairs accordingly.
As you can tell, the description list works well when you are needing to provide a list of definitions for a complex subject.
<dl>
<dt>dl tag</dt>
<dd>Used to define a description list.</dd>
<dt>dt tag</dt>
<dd>The definition term tag which specifies what you will be describing.</dd>
<dt>dd tag</dt>
<dd>The definition description tag which is describing the term list before.</dd>
</dl>This sample code should generate what you see below.
- dl tag
- Used to define a description list.
- dt tag
- The definition term tag which specifies what you will be describing.
- dd tag
- The definition description tag which is describing the term list before.
Additionally, you could use a description list as a FAQ to work on describing the answers to the questions.
Styling a Description List
By default the <dd> tag usually has a left margin helping indent it some from the <dt> tag on the left side. However, you can style each of the tags independently to build the style that you desire.
Personally, I like to add a little bit of space between my <dt> tag and the previous tag, to help with grouping the related elements together. This helps both in readability and forms a natural association between the elements.
I also often like to bold my <dt> tags, so that it helps stand out. That way if a person is looking for a term, they can visually scan the page and find the text faster. And since people tend to scan web pages instead of reading them, it improves the speed at which the item can be found.
Using the following rule will make a description list much easier on the end user.
dt {
font-weight: bold;
margin-top: 1em;
}Description List was originally found on Access 2 Learn
