Styling HTML 5 Description Lists (Formerly Known as Definition Lists) Properly

I’m not entirely sure why they switched the term from “definition list” to “description list”, but according to Mozilla and W3Schools (one of which I always trust, the other people love to hate) that’s what happened, so I’m going with it for this article.

A description list looks like this:

<dl>
<dt>Mario</dt>
<dd>red hat, fatter, gets all the attention.</dd>
<dt>Luigo</dt>
<dd>green hat, taller, likes to explore haunted mansions.</dd>
</dl>

By default, that’ll look something like this (in Chrome anyway, as of 3/2016):

screenshot of what definition list styling looks like straight out of the browser

Ehh, we can do better. Like, we want our definition terms (<dt>) to be on one side, and their definitions (<dd>) to line up to the right, instead of breaking off onto another line.

This is relatively easy, but stick around after this code snippet to see why this common method won’t necessarily always work:

dt {
float: left;
width: 30%;
text-align: right;
padding: .25em;
clear: left;
}
dd {
float: left;
width: 60%;
padding: .25em 0;
}
dl:after {content:"";display:table;clear:both;}

the same list, with a little styling so the defintions line up with their terms

Note the dl:after code there which is the clearfix hack just applied directly to that element. That will keep items that come after the dl from creeping up into our description list.

The problem is, according to the W3C spec, there won’t always be an even ratio of dts to dds.

For example, you might have a list like this (from the Mozilla documentation):

<dl>
<dt>Firefox</dt>
<dt>Mozilla Firefox</dt>
<dt>Fx</dt>
<dd>A free, open source, cross-platform, graphical web browser
developed by the Mozilla Corporation and hundreds of volunteers.</dd>
</dl>

There, we’re defining three terms with one definition. Inversely, we could have one term with three definitions:

<dl>
<dt>Hip</dt>
<dd>part of the human anatomy</dd>
<dd>to be cool</dd>
<dd>an angled obstacle skateboarders use to perform tricks</dd>
</dl>

Our CSS above will break in either of these situations, so I did some testy, got a little fancier, and produced this:

dl:after {content:"";display:table;clear:both;}
dd {
padding:.5em 0;
}
dl {
width:100%;
}
dt, dd {
display:inline-block;
width:30%;
}
dt {
text-align:right;
font-weight:bold;
clear:left;
float:left;
}
dd {
width:70%;
padding-left:1em;
clear:right;
}
dd + dd {
float:right;
clear:both;
}
dt:first-child {
padding-top:.5em;
}
dd + dt {
clear:both;
padding-top:.5em;
}
dt + dt {
width: 100%;
float: none;
padding: 0 70% 0 0;
}
dt + dt + dd {
margin-top: -2em;
}
dt + dt + dd + dt {
margin-top: 2em;
}

Bam, that leaves us with something more along these lines:

the final product as described below
Here in the final result, if there are multiple terms, they line up above the single definition, or if there are multiple definitions, they line up to the right and beneath the single term.

Up Next: How to See What a Website Looks like on a Mobile Phone, Using Google Chrome