A few years ago, we used to lay out websites by using huge nested tables. Why? It worked. But then someone said, “hey, that’s old fashioned” and we replaced tables for div elements. And we mocked at anyone who was still using tables. But even then, people weren’t quite satisfied. Are nested divs really any different from nested tables? So we started to familiarise with other html elements, such as headings, paragraphs, ordered and unordered lists, … And this is good. It’s how the web was supposed to be in the first place. We should always use the appropriate tag for our content. Why? To help us understand our code better, to help search engines understand our content and to help people with disabilities read our website.

By people getting to know more and more html tags, I’m surprised by how little people have heard of definition lists. These act a bit like unordered lists, but can contain two different elements - definition term and definition description. Let me illustrate, using a definition list:

Definition list - DL

Represents a list of definitions, like a dictionary

Definition term - DT

Identifies a new term, a word in our little dictionary

Definition description - DD

Describes the given term

So obviously, definition lists are used for various forms of dictionaries. Also, as W3 states, they can be used to mark up dialogs, “with each DT naming a speaker, and each DD containing his or her words.”

I’m not sure this is 100% correct, but I like to use them for menus sometimes. Example - see left menu. One might think of these as headings, but why can’t they be definitions as well?

Also, I tend to use them for forms:

<dl>
    <dt>Username:</dt>
    <dd><input type="text" ... /></dd>

    <dt>Password:</dt>
    <dd><input type="password" ... /></dd>
</dl>

(For demonstration purposes I left out label tags, don’t try this at home)

So, almost anywhere where I encounter a list containing two types of data, I find definition list to be the appropriate tag. Both semantically and visually - you can style different types differently without using extra class names.