Liam Potter says:

sigh


<dl>
<dt>Sub Heading</dt>
<dd>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</dd>

<dt>Sub Heading</dt>
<dd>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</dd>

<dt>Sub Heading</dt>
<dd>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</dd>
</dl>

Derek Pennycuff says:

I used DLs to mark up frequently asked questions for our redesign last year. I think that’s in line with the revamped HTML5 version of the element.

Adeel Ejaz says:

PS: you need to give a preview button, code pasted on code bin: http://code-bin.homedns.org/670

NIels Matthijs says:

I’ve always hated this element, simply because there’s no containing element grouping together one set of dd and dt. This often leads to messy css.

The semantic value has cleared up a little, which is nice, but until this element is structurally lacking I’ll try to refrain from using it I’m afraid.

Christy says:

@John I think you use when you’re literally defining a word (as opposed to displaying metadata)

I used to use s when doing an “About” page for a company–would this be appropriate in HTML5?

John Smith
Founder and CEO
After graduating from Harvard, John decided it was time to start this wonderful company. He enjoys bike riding and spending time with his dogs.

Randy says:

I agree with @niels comment above: I often need a styling hook wrapped around the [dt] and the [dd]. Would it make sense to add [div] around them for grouping?

[dl]
    [div]
        [dt] …
        [dd]
    [/div]
    [div]
        [dt] …
        [dd]
    [/div]
[/dl]

Rakesh Pai says:

I’ve heard arguments that using DLs for marking up forms is Not The Right Thing (TM). I’ve always used DLs for forms though, thinking it’s the most semantic thing for the purpose. What is your take on this, dear Doctor?

Anders says:

Good examples! However, I’m still not entirely sure of when a heading would be more suitable to use than a dt and vice versa.

excel see oar says:

@NIels Matthijs
Agreed. On more than one occassion I’ve found myself using JS to transform a DL into other tags with wrappers so I could style them. Or using a table.

Kevin Sweeney says:

I’ve always preferred to use the <dl> element for name/value pairs. I was overjoyed when I saw the spec updated the name of the element to “description list” :)

Dave says:

Why doesn’t w3 use here in the link you mention?

Jens says:

I think tables often are used when a DL would suffice or even be more semantic. But then again, I’ve always been unsure on when to use the DL. But I recon my example of a status report below this is a fair usage of the DL where often Tables are perhaps misused because it’s not really table data just simple relations between two items:


<h4>SMS - Mobile</h4>
<dl>
<dt>Message sent</dt>
<dd>18</dd>
<dt>Last sent</dt>
<dd>20110325 09:29:05</dd>
<dt>Errors</dt>
<dd>1</dd>
<dt>Last error occured at</dt>
<dd>20010324 09:2905</dd>
</dl>

Am I on the right track on this one?

Jason Kuhrt says:

I am with those calling for a grouping mechanism within dl. For me most use-cases for dt/dd are not possible without a way to group them so that I can apply various formatting. This is really disappointing because dl/dt/dd is a rather unique and semantic way of formatting content without good alternatives.

Yrgl says:

Is it correct to use <dl> for movies schedule?
<dl>

<dl>
<dt>Today</dt>
<dd>
<ul>
<li><a href=”#”><img class=”preview” …>Moview title</a></li>
<li><a href=”#”><img class=”preview” …>Moview title</a></li>
<li><a href=”#”><img class=”preview” …>Moview title</a></li>
</ul>
</dd>

<dt>Tomorrow</dt>
<dd>
<ul>
<li><a href=”#”><img class=”preview” …>Moview title</a></li>
<li><a href=”#”><img class=”preview” …>Moview title</a></li>
<li><a href=”#”><img class=”preview” …>Moview title</a></li>
</ul>
</dd>
…
</dl>

Gareth Redfern says:

Is there a way to wrap a dt and dd so that you can style them together? The spec doesn’t appear to let you?

Matth Jenks says:

I too share the frustration of the absent group styling hook. I’m impressed that someone thought to use jQuery to add the necessary containers. But it seems too hacky and frustrating; why do acrobatics just to style items? The W3C needn’t add extra tags just so we can hang styles on them. That’s akin to div within div within div.

I propose The Owl’s suggestion above as the least objectionable solution and we should all adopt it far and wide.

I already hear the hypothetical anguish: “how can a description LIST only contain one item???” Is it semantically possible for a list to be a list of one? Possibly. See the example of a grocery list with only one needed item: http://english.stackexchange.com/questions/2370/a-list-with-only-one-item

I further propose that DL is the new LI. When typing “DL” think “DLI” – “Definition List Item.” Marvelously, now we’re using less markup. One may wonder, where is our equivalent UL wrapper for the list?? Think different(ly.) Who requires a list to have a wrapper? Not the browser. As coders, we know a list is created by the simple act of grouping items. List item 1 denotes the start of the list, and the last list item denotes the end. HTML5 gives new flexibility to wrap lists in logical ways. For example:

<section class="boardMembers">

<DL><DT>Pete Schaffer</DT>
<DD>Master of CSS</DD>
</DL>

<DL><DT>Dustin Stover</DT>
<DD>Master of PHP</DD>
</DL>

</section>

The blockquote in the article above seems to reinforce this idea with the phrase, “Within a single dl element, there should not be more than one dt element for each name.” However, I cannot find this phrase anywhere in the HTML5 specification.

Roger Gordon says:

Not sure how this comment is going to come out. Apologies in advance if it’s not formatted correctly…

The HTML5 spec‘s opinion of using the dl for dialogue is that:

The dl element is inappropriate for marking up dialogue.

But it also says that:

Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.

but what about marking up an interview, as below:

<dl>
<dt>
MN: Your sound is hard to classify.
Where do you guys come from, Musically?
</dt>
<dd>
GS: The moon. Or more accurately,
we should say <em>The Dark Side
of the Moon</em>.
</dd>
<dt>
MN: How long have you known each other?
</dt>
<dd>
GS (Jamo): 3 years, or so, I guess.
</dd>
<dd>
GS (Patty): 3 years, 4 months and 11 days.
I looked it up before we came into your
offices. I thought you might ask that one.
</dd>
<dt>
What's next for <i>Garage
Sale</i>?
</dt>
<dd>
Whatever fate brings us. We didn't
renew our contract with
<i>Intercontinental</i>, so
we're free to follow the wind, so to
speak.
</dd>
</dl>

On the one hand, an interview is just a list of questions, and answers, but on the other hand, it’s also a dialogue. I personally feel that this is a valid use of the dl element, as it’s essentially an example of an association list, where questions are associated with answers.

Moview title

Jesper Allermand says:

Correction to Ex. 2 above. Should be:

Animals
– Ape (links to some page)
– Ant (links to some page)

Drinks
– Beer (links to some page)
– Blueberry soda (links to some page)

– etc.

Jesper Allermand says:

Thanks for your input Mike!

pp says:

[ul]
[li ] [a href=”#”]A[/a][/li]
[li ] [a href=”#”]B[/a][/li]
[li ] [a href=”#”]C[/a][/li]
[li ] [a href=”#”]D[/a][/li]
….
[/ul]
[dl]
[dt] A [/dt]
[dd] Apple [/dd]
[dd] application [/dd]
[dd] adobe [/dd]
….
[/dl]

[dl]
[dt] B [/dt]
[dd] Boy [/dd]
[dd] Bad [/dd]
[dd] Bed [/dd]
….
[/dl]

Use when searching this way, how to use?

Martin F says:

Excellent way of using <dl> for a dialogue, Roger G!

Ken says:

Oops, the code for my stats above is:

<dl>
<dt>Discussions:</dt>
<dd>41,310</dd>
</dl>
<dl>
<dt>Messages:</dt>
<dd>512,883</dd>
</dl>
<dl>
<dt>Members:</dt>
<dd>35,793</dd>
</dl>
<dl>
<dt>Groups:</dt>
<dd>100</dd>
</dl>
<dl>
<dt>Latest Member:</dt>
<dd><a href="#">user101</a></dd>
</dl>

Andreas Rejbrand says:

First I want to say that I am very pleased with the development of the Hypertext Markup Language in the form of HTML5. I love most of it, especially (actually) the new semantic elements HEADER, FOOTER, MAIN, ARTICLE etc, and the clarification of the semantics of existing HTML 4 elements (CITE, EM, I, STRONG, B, …).

I also very much support the new semantics of the description list (DL) element. It has probably been much misused in the past, as the definition list element – indeed, it has often been used for other things than defining terms (term, definition). The new idea of using it as a general name-value markup system is very pleasing.

However, I have one issue with the DL/DT/DD elements. Consider the following hypertext fragment:

Subject: A Question
From: Mr Smith
Time: 2013-08-05

The DL element would be ideal for marking this up, wouldn’t it? I’d do


<dl>
<dt>Subject</dt>
<dd>A Question</dd>
<dt>From</dt>
<dd>Mr Smith</dd>
<dt>Time</dt>
<dd>2013-08-05</dd>
</dl>


(I’d also use the TIME element, but let’s focus on the main issue here, the description list itself.)

To format this, I’d do


<style>
dt {
font-weight: bold;
}
dt:after {
content: ": "
}
</style>


But wait! Browsers will display this with the DD on a new line (relative to the DT). Surely everyone knows about the workarounds (using float:left or content:"\A" or something else). These “workarounds”, however, are very awkward and non-natural. They are “dirty tricks”. Neither the float property nor the content property was primarily designed to do things like this, I suppose.

As far as I can see, the most obvious solution to this problem is to (re-) introduce the DI element, known from XHTML 2.

The idea is to let DI elements – description items – be the children of the DL. A single DI must contain one or more DTs followed by one or more DDs. For both the sake of simplicity and the sake of backwards compatibility, the DI elements should be optional; DTs and DDs may be direct children of the DL node.

Using the DI tag, you could use the following markup:


<dl>
<di>
<dt>Subject</dt>
<dd>A Question</dd>
</di>
<di>
<dt>From</dt>
<dd>Mr Smith</dd>
</di>
<di>
<dt>Time</dt>
<dd>2013-08-05</dd>
</di>
</dl>


together with the following CSS:


<style>
di {
display: block;
}
dt, dd {
display: inline;
}
dt {
font-weight:bold;
}
dt:after {
content:": "
}
dd {
margin-left:0;
}
</style>


to achieve the desired presentation of the DL element. If you have several DDs per DT, you could do


dd + dd:before {
content:" / "
}


Hence, by introducing the (optional) DI element, you can use DLs in more situations, before you have to rely on CSS tricks or resort to tables.

Duff Johnson says:

I had written an article comparing HTML’s list model with that of PDF’s structure elements before reading this piece and the comments. I was, therefore, delighted to read so many proposing (indeed, crying out for) a <di> concept.
Or, as one person said: “good old <li>”.

http://duff-johnson.com/articles/lists-contrasting-html-with-pdf/

pongo says:

I’ve never used dl’s, but I came across it today and decided to look it up which led me here. Unfortunately, even with the ‘new’ definition of its use I am still unclear if it would be correct for my purposes. I often find myself listing features of a product which goes something like this :


category 1
description of the category

feature 1
feature 1 description
feature 2
feature 2 description
feature 3
feature 3 description
... and so on

category 2
description of the category

feature 1
feature 1 description
feature 2
feature 2 description
feature 3
feature 3 description
... and so on

I have always used unordered lists for this... are dl's appropriate in this manner? This would all be for one product... the categories would just be grouped features. So say if I was listing a car the categories might be interior, exterior, engine, etc... then sub features listed within each of those... hopefully that makes sense.

Martin F says:

Why not have nested DLs, @pongo?

<dl>
<dt>category 1
<dd>description of the category
<dl>
<dt>feature 1
<dd>feature 1 description
<dt>feature 2
<dd>feature 2 description
<dt>feature 3
<dd>feature 3 description
</dl>
<dt>category 2
<dd>description of the category
<dl>
<dt>feature 1
<dd>feature 1 description
<dt>feature 2
<dd>feature 2 description
<dt>feature 3
<dd>feature 3 description
</dl>
</dl>

Martin F says:

Seems to be a perfectly good usage.

Torsten says:

Very good explanation, thank you. I had not known that it is possible and allowed to have multiple terms (dt) to only one description (dd).

I use a desription list for a history, to trace the development of a website of mine which I fiddle around with from time to time. Styled with CSS, this list looks quite well arranged.

Daniel says:

I see that most JavaScript editors (tinymce, ckeditor, etc.) do not support description lists now. I guess that there is no much interest in description lists.