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 to 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.

You can also use block level elements in the definition description. A definition list can also contain a series of DT DD pairings.

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.]

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.

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.

The code above will give the following output.

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.

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.

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.