Definition Lists
- Definition List
- Definition lists are probably the least used of the three HTML list types. They are used primarily for things such as glossaries or other dictionary-type setups, but can be effectively used for anything where you need an expanded description attached to something.
Above was an example of a definition list. The words ‘Definition List’ was the term, and the indented text was the definition of that term. I will expand on these below.
Anatomy of the Definition List
The definition list has three tags:
<dl>- The
<dl>tag goes around the outside of the list in the same way as<ul>goes around an entire unordered list. <dt>- The
<dt>tag goes around the term that is to be defined <dd>- The
<dd>tag goes around the definition for the preceding term
An example of code for a definition list:
<dl>
<dt>
HTML
</dt>
<dd>
"Hyper Text Markup Language"
used for writing web pages.
</dd>
<dt>
CSS
</dt>
<dd>
"Cascading Style Sheets"
used for applying visual effects to web documents.
</dd>
<dl>
This code has the effect of:
- HTML
- “Hyper Text Markup Language” used for writing web pages.
- CSS
- “Cascading Style Sheets” used for applying visual effects to web documents.
Uses for the Definition List
On my Cert 2 website, I used definition lists for lists of links. The ‘terms’ are the names of the sites, and the definitions are short descriptions of the same sites.
A perhaps more interesting use is for adding captions to images. I used this technique here and here, with the image in the term and the caption in the <dd> (Each of the image/caption pairs were put in a separate <dl>, and each of the <dl>s were floated left to get ‘em side by side).
Definition lists seem to have a very specific purpose, and that makes them one of the least used HTML tags. However, with some thought and imagination, the <dl> provides a logical and accessible way to link any kind of term to an expanded description.
And remember, most every aspect of its appearance can be altered using CSS.