1. Technology

Definition Lists

Learn How to Use and Style HTML Definition Lists

By

When people think of lists they usually think of either bulleted (unordered) or numbered (ordered) lists. These are great tools for web designers, but there is another type of list that is often overlooked: the definition list.

A definition list is so-called because it is a list of terms with their associated definitions. It consists of three tags rather than two:

  • <dl>
    This opens and closes the list. This is similar to the <ol> and <ul> tags for numbered and bulleted lists.
  • <dt>
    This is the definition term.
  • <dd>
    This is the definition.

A typical definition list looks like this:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language. The language used to write Web pages. Based on SGML and recently rewritten to follow XML guidelines.</dd>
  <dt>pixel</dt>
  <dd>A font height or size that is based on screen pixels or dots.</dd>
  <dd>A single dot on a computer screen.</dd>
  <dt>XHTML</dt>
  <dd>Extensible HTML - HTML 4.0 rewritten to be compliant with XML rules.</dd>
</dl>

See the list

Why Are Definition Lists Forgotten?

I believe that the reason definition lists aren't used as often as the other list types is because of the name. People think back to grammar school when they were sent home with a list of ten words that they had to define from the dictionary. While that is one way to use the definition list, it is only one use.

There are Other Uses for Definition Lists

A better way to think of definition lists is as a name/value pair. Any time you have a list of items where you want one item matched with one or more other items, you should use a definition list (rather than an unordered list).

For example, above I list the three tags that are part of a definition list. And below each tag is a short description of the tag. This should be coded as a definition list. Above it's coded like this:

<ul>
  <li><strong><a href="/od/htmltags/p/bltags_dl.htm">&lt;dl&gt;</a></strong><br>
  This opens and closes the list. This is similar to the &lt;ol&gt; and &lt;ul&gt; tags for numbered and bulleted lists.</li>
  ...
</ul>

But it would be more semantically correct, and easier to style each part of the item separately if I coded it like this:

<dl>
  <dt><strong><a href="/od/htmltags/p/bltags_dl.htm">&lt;dl&gt;</a></strong></dt>
  <dd>This opens and closes the list. This is similar to the &lt;ol&gt; and &lt;ul&gt; tags for numbered and bulleted lists.</dd>
  ...
</dl>

(I coded it as a bulleted list because the About CMS doesn't allow the definition list tags).

See the list as a definition list

Styling a Definition List

The first thing you'll notice when you build a definition list is that the definition is indented from the term. To get rid of this, you need to zero out the margins on the dd tag:

dd { margin: 0; }

Zeroed out margins on the dd

Once you've zeroed out the margins, it's nice to make the term bold or otherwise stand out.

dt { font-weight: bold; margin-top: 0.8em; }

Highlighted term

Then, if you want the term to be on the same line as the definition, you need to start floating the elements and adding widths, so that they don't take up too much space:

dt { font-weight: bold; float: left; width: 10em; background-color: #ccc; }
dd { margin: 0 0 0.4em 0; float: left; }
p.clear { clear: both; }

More Styles

I added in the style on the p tag and I added a paragraph tag with the class “clear” immediately following the list. This will insure that nothing else on the page floats around the list.

An Excellent Use of Definition Lists - Forms

It’s always hard to style forms to be positioned the way you want them to be. But most forms are set up in a name/value pair style - which is perfect for the definition list. Here is the HTML for a sample form inside a definition list:

<form action="#">
  <dl>
    <dt>First Name:</dt>
    <dd><input type="text" name="firstname" id="firstname" /></dd>
    <dt>Last Name:</dt>
    <dd><input type="text" name="lastname" id="firstname" /></dd>
    <dt>Email Address:</dt>
    <dd><input type="text" name="email" id="firstname" /></dd>
    <dt>Your Thoughts:</dt>
    <dd><textarea name="thoughts" id="thoughts" cols="20" rows="5"></textarea></dd>
    <dt class="nobg"><input type="submit" name="submit" value="Submit" /></dt>
  </dl>
</form>

Be sure to place the form tags outside the list so that your HTML is valid.

Then style your form as you like:

dl { width: 25em; }
dt { font-weight: bold; float: left; width: 8em; background-color: #c00; color: #ddd; }
dt.nobg { background: none; }
dd { margin: 0 0 0.4em 0; float: left; }
p.clear { clear: both; }

Style a Form with a Definition List

Related Video
Create Bullet, Number, and Definition Lists in HTML

©2014 About.com. All rights reserved.