Definition Lists. <DL>, <DT> and <DD>
This article explains what definition lists are why they are useful, and how use them when writing HTML documents. The idea for writing this article came to me when browsing a web site which was providing glossaries of internet terms, in looking at the source code for the page I was struck by the fact that the author was using heading tags such as <h3> followed by a paragraph tag <p> to present the information. The site in question (http://www.mcu.org.uk, a site I visit regularly) has since begun using a definition lists to present it's glossary.
So what is a definition list?
Simply put it is a list of definitions. For the unabridged version read the relevant section in the HTML specification. Basically a definition list is composed of three HTML elements and some text. These are the <dl>, <dt> and <dd> elements.
- <DL>
- A definition list is the container element for DT and DD elements. The DL element should be used when you want incorporate a definition of a term in your document, it is often used in glossaries to define many terms, it is also used in "normal" documents when the author wishes to explain a term in a more detail (Like this definition).
- <DT>
- The term currently being defined in the definition list. This element contains inline data.
- <DD>
- The definition description element contains data that describes a definition term. This data may be either inline, or it may be block level.
Why definition lists are useful?
At this point you may be thinking that I am somewhat pedantic for noticing when web pages are missing DL elements, after all if a series of definitions looks like a series of definitions then it doesn't matter what markup is used. This point of view is contrary to the ethos behind HTML, definition lists are important because they provide a context for the text with which they are associated. Why then is context important? By being given context, text is given added meaning. This is important because your web page is not always being looked at visually, so what else is looking at your pages?
Added Value? Benefits of using semantic markup.
If you think that just humans are viewing your page you would be mistaken. An example of an application that would be interested in DL elements is the google glossary. This is currently a product of the google labs and as such is in development and may move around from time to time. What the glossary search engine does do though is provide a concrete example of how using definition lists can give added value to a page. By semantically marking up your content you enable it to be processed by automatic methods much more easily.
Semantic markup can benefit advanced content management systems. Bob Boiko (The Content Management Bible, p457.) explains that metadata can be embedded into the content as well as maintained separately. By using definition lists, and other semantic markup constructs, you can more easily extract structured information about your content.
Examples of definition lists
This section provides a few examples of how you can use definition lists.
Single Definition Term - Single Description
The markup to define a single definition is fairly simple.
<dl>
<dt>Cascading Style Sheets</dt>
<dd>Style sheets are used to provide presentational suggestions for structured documents marked up in XML or HTML. </dd>
</dl>
You can also use block level elements in the definition description. A definition list can also contain a series of DT DD pairings.
<dl>
<dt>Cascading Style Sheets</dt>
<dd><p>Style sheets are used to provide presentational suggestions.</p>
<p>Documents structured using XML or HTML are able to make use of them.</p></dd>
<dt>Content Management</dt>
<dd>The process of collecting, managing and publishing content to various media.</dd>
</dl>
The code above will give the following output. [Note: The format or presentation of the output is dependant upon your browser as the markup is demonstrating the structure not the presentation.]
- Cascading Style Sheets
-
Style sheets are used to provide presentational suggestions.
Documents structured using XML or HTML are able to make use of them.
- Content Management
- The process of collecting, managing and publishing content to various media.
Multiple Terms - Single Description
Definition lists are not limited to simple pairings of terms and descriptions, in this example it is shown how definition lists can be used to indicate a single description for multiple terms.
<dl>
<dt>Number 9</dt>
<dt>Striker</dt>
<dt>Centre Forward</dt>
<dd>The player who should be scoring the most goals in a game of (real) football.</dd>
</dl>
As well as grouping terms which are related (as in the previous example), terms from different languages can also be given a common definition. Note the use of the lang attribute.
<dl lang="en">
<dt>Centre</dt>
<dt lang="en-us">Center</dt>
<dt lang="fr">Centre</dt>
<dd>A point equidistant from all points on the surface of a sphere.</dd>
</dl>
The code above will give the following output.
- Centre
- Center
- Centre
- A point equidistant from all points on the surface of a sphere.
Single Term - Multiple Descriptions
Using multiple descriptions to define a single term can be useful when the term you are describing does in fact have more than one meaning, The following example is based on an example given in the HTML 4 specification.
<dl>
<dt>Centre</dt>
<dd>A point equidistant from all points on the surface of a sphere.</dd>
<dd>In some field sports, the player who holds the middle position on the field, court, or forward line.</dd>
</dl>
Multiple Terms - Multiple Descriptions
It is possible to have both multiple terms and multiple definitions. This is useful when defining a few words which share a multiple common meanings.
<dl>
<dt>Garbage</dt>
<dt>Rubbish</dt>
<dd>Waste material that is disposed of.</dd>
<dd>Television shown during the daytime, "Daytime TV".</dd>
</dl>
In Conclusion
I hope this has helped to illustrate some of the possible uses definition lists can be put to. Given a basic understanding of how definition lists can be used it is possible to develop useful associations between snippets of information. Tools such as the google glossary show how information which is meaningfully marked up can be used in more ways than originally intended. Sites that use semantic markup to add meaning to their data are then able to use and reuse that information more flexibly, put simply there is more scope for future functionality to be added.
References
- Comment about the glossary which prompted article
- HTML 4.0 Specification, 10.3 "Definition Lists" section
- Google Labs Glossary Search
- The Content Management Bible, Bob Boiko
Further Reading
- An interesting analysis of definitions and definition lists. Raises some isues not covered in this article.
Thanks
Thanks to all those who have commented on this article and suggested improvements. If you have any comments or suggestions please contact me with them.