Back to

Definition Lists

<dl>  opens a definition list
<dt>  precedes each defined term
<dd>  precedes each definition
</dl> closes the definition list

For those who actually need to define some terms, the definition list creates a readable list with staggered margins. And those who want the margins - but don't really need a list - can easily use the tag for their own purposes.

All definition lists begin with the <dl> tag, and end with </dl>. But unlike their numbered and unnumbered partners - which use the <li> tag to set off list items - the definition list is punctuated with the <dt> and <dd> tags, which differentiate between the terms (<dt>) and their definitions (<dd>)

The HTML for a simple list would go something like this:

<dl>
<dt>Thoughts
<dd>We have learned so much about creating a homepage already. The use of graphs and the proper way to use links are so very important. I must also remember to code properly, this is the most important rule!

<dt>HTML Coding
<dd>The most important thing to use properly when creating a homepage.
</dl>

And would look like this:

Thoughts

We have learned so much about creating a homepage already. The use of graphs and the proper way to use links are so very important. I must also remember to code properly, this is the most important rule!

HTML Coding

The most important thing to use properly when creating a homepage.

So that's why it's called a definition list. But, in truth, the <dl> tag is only rarely used like this. More often, you'll spot it indenting text, staggering paragraphs, and generally pushing text around. Take this example:

<dl>
<dd>He didn't want to take that test.<br>
<br>
<dl><dl><dl><dd>And who could blame him?<br>
<br>
</dl></dl>
<dd>He would have to study all night.<br>
<br>
</dl>
<dd>Doesn't sound like too much fun to me!
</dl>