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.

• MaxDesign: Definition lists – misused or misunderstood?

]]> http://ogremindes.net/blog/definition-lists/feed/ 0