I have grown to appreciate the little details in well written HTML and the usage of the typically forgotten Definition List is one of those details. The other day I noticed a Definition List being used in some source I was sifting through and decided to write a short post about what a Definition List is, how its used, and why.
Defining the Definition List
The less popular relative of the List family, a Definition List is the HTML used to structure a list of terms and there associated definitions. For example, if I was writing a web page and in the content of that page I needed to define multiple terms I would use the definition list and its child element tags to logically and semantically describe each part of that list. In the same way that I describe in code what part of my page is a paragraph or a heading.
The Tags (DL, DT, DD)
There are three tags associated with the Definition List. First we’ll start with the opening and closing parent tags <DL></DL>. Similar to an ordered or unordered list you must begin the list with <DL> and end the list with </DL>. Definition Lists are a little different in that instead of just having one child tag like other lists, they have two, and even stranger – they aren’t required to be closed. The two child tags are <DT> and <DD>. The DT tag stands for Definition Term and is simply used in front of the word or phrase you are defining. The DD tag means Definition Description and is used in front of the text you are using to define the Definition Term. Take a look at the code below to help put all of this into perspective.
<dl> <dt>Word/Phrase <dd>The definition of Word/Phrase <dt>Another Word/Phrase <dd>The definition of Another Word/Phrase </dl>
So you see, its really rather cut and dry. Open your list with the <DL> tag. Use the <DT> tag to write the term you are about to describe. Follow it up with the <DD> tag for the definition of the term and when you are through defining terms close up the list with the </DL> tag. Keep in mind the Definition List can also be used semantically to outline a dialog such as an interview or discussion where the DT tag is the speaker and the DD tag contains the content of the discussion; as seen below.
<dl> <dt>Bob</dt> <dd>So what do you think of Definition Lists?</dd> <dt>Jane</dt> <dd>I think Definition Lists are great!</dd> <dt>Bob</dt> <dd>Indeed, Definition Lists will revolutionize modern science!</dd> </dl>
This sort of syntax can also be used semantically for recipes or you can even mix list types. Take a look at the following example:
<dl> <dt><strong>Fake Blood Recipe</strong></dt> <dd> <ul> <li>2/3 cup clear corn syrup</li> <li>1/3 cup warm water</li> <li>5 Tbsp Corn Starch</li> <li>2 drops of green or yellow food coloring</li> </ul> </dd> <dt><strong>Procedure</strong></dt> <dd> <ol> <li>Mix the corn starch and water in large mixing bowl.</li> <li>Stir in the corn syrup.</li> <li>Add the food coloring slowly, checking for color.</li> <li>Pour all over you.</li> <li>Scream (very important).</li> </ol> </dd> <dt><strong>Notes:</strong></dt> <dd>Have fun and scare your grandma!</dd> </dl>
This type of usage can be expanded even further to include calenders or even screenplay material. For more information on Definition Lists and proper usage, take a look at this W3C Definition List article.