Definition lists are the neglected step-children of list elements. Many people struggle with how to code something, going through all sorts of complications when all they really need is a definition list. A definition list is meant to include a term and its definition or definitions. But that can be stretched quite a bit, and has been. Definition lists are used for dialog, FAQs, navigation, and photo galleries.
Here is the syntax, which uses dl
(definiton list), dt
(definition term) and dd
(definiton data) to build the list:
<dl>
<dt>a term or title or label</dt>
<dd>some data about the term</dd>
<dd>other possible data about the term
<p>perhaps even a block level element such as this paragraph</p></dd>
</dl>
That renders like this:
- a term or title or label
- some data about the term
- other possible data about the termperhaps even a block level element such as this paragraph
As you can see, the default style shows the dt
, with the dd
indented under it. I used two dd
elements to show that a dt
can have more than one dd
. The fact that a block level element can be nested inside a dd
is handy to know, especially if you are using the list to write dialog and a character needs to speak for a number of paragraphs.
So much for the default style. If you add CSS, you can do some of the magic I mentioned before. There is an older but highly relevant article at MaxDesign called Definition Lists: misused or misunderstood that you should read. It gives you some philosophical overviews of the semantics of using definition lists in various ways, but more importantly, it provides a large set of styled definitions list examples. Be sure to look at the examples.