The dl element

by .

The <dl> element existed in HTML 4, but it’s been repurposed in HTML5. Let the Doctor explain what’s changed and how it can be used.

It’s all in the description

In HTML 4, <dl> was considered a “definition list”, containing groups of terms and their definitions. The terms and definitions were a many-to-many relationship: one or more terms to one or more definitions. The element was often misunderstood and therefore misused or not used at all in favour of more widely used and (perhaps) less semantic markup.

To address these issues, <dl>’s definition has been refined in HTML5 as a description list. From the spec:

The dl element represents an association list consisting of zero or more name-value groups (a description list). A name-value group consists of one or more names (dt elements) followed by one or more values (dd elements), ignoring any nodes other than dt and dd elements. Within a single dl element, there should not be more than one dt element for each name.

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

It maintains the many-to-many relationship between names and values. These groupings use <dt> to represent the term or name and <dd> for the description. Also note the last line of the quote, stating that a name should not be used more than once within a single <dl>.

Example Uses

I’ve put together a couple of appropriate uses of <dl> to get your creative juices flowing.

Glossary

<dl> can be used to mark-up a glossary of terms, although you must remember to use <dfn> to indicate that the word is defined here:

<article>
  <h2>The article element</h2>
  <p>An independent piece of content, one suitable for putting in an
    article element, is content that makes sense on it’s own. This yardstick
    is up to your interpretation, but an easy smell test is would this make sense
    in an RSS feed? Of course weblog articles and static pages would make sense
    in a feed reader, and some sites have weblog comment feeds..</p>
  ...
  <aside>
    <h3>Glossary</h3>
    <dl>
      <dt><dfn>RSS</dfn></dt>
      <dd>An XML format for aggregating information from websites whose 
        content is frequently updated.</dd>
      <dt><dfn>Weblog</dfn></dt>
      <dd>Contraction of the term "web log", a weblog is a 
        website that is periodically updated, like a journal</dd>
    </dl>
  </aside>
</aticle>

The example content is from our recent post on the article element. In the example, I plucked out the terms “RSS” and “weblog” and defined them in a handy glossary. Since this information is supplementary to the article, the glossary has been placed in an <aside>.

Metadata

<dl> is also appropriate for marking up content metadata, such as information about our article on how to use HTML5 in your client work right now.

<dl>
  <dt>Authors:</dt>
  <dd>Remy Sharp</dd>
  <dd>Rich Clark</dd>
  <dt>Editor:</dt>
  <dd>Brandan Lennox</dd>
  <dt>Category:</dt>
  <dd>Comment</dd>
</dl>

Since Remy and Richard contributed to that article, they are both listed as authors, showing the pairing of multiple values (<dd>) to one key (<dt>).

Multiple keys (<dt>) to a single value

As mentioned above, a <dl> may map many keys (<dt>) to many values (<dd>). This means that one term might have multiple descriptions, or there may be multiple terms that mean the same thing. Related <dt>s should follow each other immediately before their descriptive <dd>.

<dl>
  <dt lang="en-GB"><dfn>colour</dfn></dt>
  <dt lang="en-US"><dfn>color</dfn></dt>
  <dd>The visual result of light in their emission, transmission and/or reflection. This perception is determined by the hue, brightness and saturation of the light at a specific point. </dd>
</dl>

Here I have indicated that there are two different spellings of “colour” and grouped these terms to match them with the same description.

It is not appropriate, however, to use the same key multiple times within a single <dl>. You can’t define “car” as one thing at the start of a <dl> and then define it again at the end of that same <dl>. If you have multiple descriptions for a single term, you should list both <dd>s directly under the same <dt>.

<dl>
  <dt><dfn>Chips</dfn></dt>
  <dd>Strips of potato usually deep fried in fat. Commonly referred to as "french fries".</dd>
  <dd>A small fragment that has been broken off from a larger body (e.g. stone).</dd>
</dl>

What it should not be used for

Dialogue was a suggested use for <dl> in HTML 4, which was widely debated and often considered inappropriate. This application of the element is no longer recommended in HTML5, and the new definition of the element does indeed back this up. When marking up a conversation, you’re not describing the speaker, but rather stating what they said. With the demise of <dialog>, conversations have no specific markup element. Instead, the specification makes recommendations of how to mark up conversations.

Summary

The changes to <dl> are fairly minor, but the new definition should clear up confusion and enable developers to use it more appropriately. You can use this element to represent key-value pairs semantically and couple it with other elements like <details> and <aside> to give context to this information.

Where do you see yourself using <dl> in HTML5? Perhaps details about a downloadable file? Or are you going to give your more technical blog articles a glossary? Let us know in the comments!

62 Responses on the article “The dl element”

  • […] This post was mentioned on Twitter by Remy Sharp, Rich_Clark, Mike Robinson, Rob Griffiths, html5laboratory and others. html5laboratory said: RT @html5doctor: New from @akamike, the repurposed dl element. http://html5doctor.com/the-dl-element/ […]

  • Liam Potter says:

    I personally use the dl element as a way to markup forms and what I think it is even more suited for is vertial navigation with headings eg

    Sub Heading

    Link
    Link
    Link
    Link
    Link

    Sub Heading

    Link
    Link
    Link
    Link
    Link

    Sub Heading

    Link
    Link
    Link
    Link
    Link
    Link

  • 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>

  • Liam, I do not think either of those uses of <dl> are appropriate.

    For your navigation example, you are not describing what a particular section is but instead what it contains. This isn’t an effective approach to navigation elements, especially considering there is a more appropriate element for semantically marking up site navigation: nav. A modified version of your example:

    <nav>
      <h2>Sub Heading</h2>
      <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>
      
      <h2>Sub Heading</h2>
      <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>
      
      <h2>Sub Heading</h2>
      <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>
    </nav>
    

    As for forms, again the supposedly descriptive <dd> becomes empty to a machine parsing the page, as a description has yet to be defined. If you pair a <label> wrapped in a <dt> and an <input> within a <dd> you are not adding any more value semantically than already exists. With the for attribute you are establishing a link between a <label> and <input>, anything more is generally unnecessary. Generally people want to wrap inputs and labels in something so they can do more advanced styling, in which case either <fieldset> (if there is a semantic grouping of fields) or <div> (if it is purely a styling hook) would be more suitable.

  • 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:

    One thing I was hoping you would cover was using it for fields like (whether it is appropriate or not):

    My Form

    Name:

    Email

  • Adeel Ejaz says:

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

  • wds says:

    Offtopic, but could you disable pingbacks for the comments? Looks like it’s all spam anyway.

  • 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.

  • John Faulds says:

    @Adeel: I think your question’s already been answered by Mike’s previous comment, i.e., it’s not appropriate.

    My question relates to why you need <dfn> inside a <dt>? Isn’t definition implied by the <dt>?

  • 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.

  • Christy says:

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

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


    <dl>
    <dt>John Smith</dt>
    <dd class="title">Founder and CEO</dd>
    <dd class="bio">After graduating from Harvard, John decided it was time to start this wonderful company. He enjoys bike riding and spending time with his dogs.</dd>
    </dl>

  • 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]

  • John Pisello says:

    I have used <dl> to mark up a restaurant menu, and to organize web forms. But after thinking about Mike’s comments above, I agree that <dl> adds no semantic value to the form and its use in the form actually violates its own semantics. So I’ll be changing my forms soon…. Ah, well–live and learn!

  • 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?

  • Alohci says:

    @Rakesh – Forms have their own dedicated elements FORM, FIELDSET, LABEL, INPUT, etc. LABEL binds the prompt text to the control in a completely semantic and accessible way. FIELDSET provides appropriate grouping. Can you explain what you can do semantically with DLs that you can’t do with the above elements?

  • 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.

  • I’ve written a little blog post to explain my worries in a bit more detail.
    http://www.onderhond.com/blog/work/dl-dd-dt

    In short, the new defintion of the dl element is awesome, I just don’t understand why it should still be a “list” structure and why there aren’t any unique containers for each list item. My biggest fear is css hell and poor semantic containment.

  • 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.

  • David Goss says:

    On forms: Presumably the reason for using a list of any kind is so that each <label> and <input> pair have a containing element which would also contain help or error text. For this, an ordered list seems appropriate (and I’m not the first to say so) because the fields are being filled out in sequence. Where it makes sense to split the form up into several parts on one page, you could use an ordered list for each part and wrap each list in a <fieldset>. I think this gives the right semantic value and also gives you flexibility for styling and scripting without adding too many classes or IDs.

    Question: Would a definition list be right for what I would call a feature list on a ecommerce site? For example:


    <dl>
    <dt>Processor</dt>
    <dd>3GHz</dd>
    <dt>Memory</dt>
    <dd>3GB</dd>
    </dl>

    or in my specific case for a clothes site:


    <dl>
    <dt>Material</dt>
    <dd>100% Cotton</dd>
    <dt>Care</dt>
    <dd>Machine wash at 30°</dd>
    </dl>

    The alternative is to use an unordered list and wrap the term in a <strong> or <b>. That doesn’t seem as good to me, but I don’t want to overstretch the semantics of definition list. Any thoughts from anyone?

  • 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” :)

  • James says:

    Gah, despite the promise of super flexible anchor elements that can wrap around anything it appears that I’m still not allowed to do this (according to the current W3C validator anyway):


    <dl>
    <a href="#">
    <dt>aaa</dt>
    <dd>lorem</dd>
    </a>
    <a href="#">
    <dt>bbb</dt>
    <dd>ipsum<dd>
    </a>
    </dl>

    Have I missed something, or do I have to repeat the anchors on dd and dt, old-school style?

  • @James — yeah unfortunately <dl>’s content model is “Zero or more groups each consisting of one or more dt elements followed by one or more dd elements” (the dl element). If you look at the table of all the elements anything which doesn’t have “flow” or “phrasing” in the Children column can’t contain an <a>. Apart from things you’d expect (empty elements like <hr>, the <hgroup> element etc), it also includes these elements:

    • <dl>
    • <ol>
    • <ul>
    • <table>
    • <thead>
    • <tfoot>
    • <tbody>
    • <tr>

    You can include block-level links inside these elements (among others) though:

    • <li>
    • <dt>
    • <dd>
    • <th>
    • <td>

    HTH

  • In short,we can do it that have lots of way.

  • Dave says:

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

  • Dave says:

    I mean end tag of a p element but it disappeared :S

  • 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?

  • David Alpert says:

    I’m still frustrated by the lack a semantic container that links together related <dt>’s and <dd>’s.

    I’d prefer something like:

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

    Where the <di/> represents an ‘item’. or perhaps it is the simple and lovable <li/> tag.

    Something that structurally groups related terms and definitions for both styling and interaction.

  • 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.

  • Daniel Iser says:

    Could this be used for a price list. ie services. could be done like the following?


    <dl>
    <dt>Service</dt>
    <dd>Description</dd>
    <dd>Price</dd>
    </d>

  • 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>

  • Tre says:

    I really don’t see a huge interest on dl comparatively to ul. not having a grouping mechanism within dl is really disappointing. I rather use ul in my web site design.

  • 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?

  • The Owl says:

    In line with the grouping mechanism, say you have a mulitple column layout with name->descriptions (dt->dd) per column.

    Is it reasonable to just use multiple dl elements like:


    <dl>
    <dt>Name:</dt>
    <dd>Sam Jones</dd>
    </dl>
    <dl>
    <dt>Location:</dt>
    <dd>Denver, CO</dd>
    </dl>

  • 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.

  • Matth Jenks says:

    Actually I found it:
    http://www.w3.org/TR/html5-author/the-dl-element.html
    but I mistakenly read into it what I wanted to hear:
    …dt element for each NAME, not for each LIST.

  • 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:

    I’m trying to find out what the best and most appropriate markup for some listing pages I need to do is.

    The following are examples of content, both lists are kind of glossaries.

    Ex. 1

    A
    – Ape (links to some page)
    – Absint (links to some page)

    B
    – Boris (links to some page)
    – Bachelor (links to some page)
    – Break (links to some page)

    C
    – etc.

    Ex. 2

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

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

    C
    – etc.

    For now I’ve done both as description(/definition) lists – dt for each letter and dd for each value (the once linking to other pages), but I’m not sure if this is the most correct/appropriate markup to use.

    Could as well be done by a h2-heading for each letter and a ul-list for words belonging to that letter..

    Also, I’ve read that some screen readers (JAWS, Window-Eyes, etc.) struggle with description(/definition) lists – presenting dt and dd as a “flat” list.

    A bit confused – Hope you guys can help..

  • 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: I do not think <dl> is appropriate for your examples. The items you use in <dd> are not definitions of their associated <dt>. Your best bet is proper headings (h1-6) and <ul>/<ol>.

  • Jesper Allermand says:

    Thanks for your input Mike!

  • jack says:

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

    So, are divs allowed like in this example or not

  • 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?

  • @jack: You should not use dl + divs in this manner. The only elements that can be children of dl are dt and dd

    @pp: I think your example is similar to Jesper‘s – You should use headings and ul/ol for your groupings.

  • Martin F says:

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

  • Ken says:

    Is this element can be used in site statistics? i.e.

    Discussions:
    41,310

    Messages:
    512,883

    Members:
    35,793

    Groups:
    100

    Latest Member:
    user101

  • 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>

  • Yes, Ken, but you don’t need all those intermediate pairs of “</dl> <dl>” ndash; just one start-list and one end-list tag.
    The difference, by default, will be the presence/absence of blank line separators, which you could handle via style.

  • 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.

  • wipe3out says:

    Can I use dl to markup navigation??

    like this:

    Navigation Of My Website

    MOVIE
    The list of the movies I’ve ever seen

    ILLUSTRATION
    Some of my pencil drawing works

    I searched about how to do this and found some tutorials. But those web site use to apply CSS for title and description.

    http://www.wplover.com/1016/
    http://marketpress.com/documentation/xtreme/xtreme-knowledgebase/navigation-with-description/

    But I think span is not appropriate to do this because title and its description is not same. In my example, MOVIE is a title of navigation and “The list of the movies…” is just a description. (If I use span for this purpose, the title of first navigation would be “MOVIEThe list of the movies…” and I think it’s not good)

    If you think dl is not suitable for defining menu item, please tell me what kind of tag would you use for this.

    Sorry for my bad English and lack of the knowledge of HTML.

    Thank you!

  • 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/

  • @wipe3out: No, you want to use headers and unordered lists

    As for me, I’ve used definition lists for dramatis personæ (persons or characters of the drama, list of characters or persons, usually for a play or opera).

    Character Name (term): Character’s description (definition)

  • 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.

  • Harrald says:

    I often use dl’s for things like contact info.

    Ie:
    Tel: 0123456789
    Fax:0123456789
    Email: example@domain.com
    Address: langestraat 11 1789KG Alkmaar the Netherlands

  • 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>

  • pongo says:

    @martin – you certainly could. I was more concerned if the use of dl was appropriate given the ‘content’ of my example. At first, it seemed as though they were for definition only… now, it has been changed to description. To me, features of a product, such as the car example I mentioned, would fit the ‘description’.

  • Martin F says:

    Seems to be a perfectly good usage.

  • Liz says:

    I use description lists when doing step by step instructions and then style them with CSS to add auto numbering to each step.

    The dt is the overall title of each step and the dd gives as much info as required making use of other tags within it.

    Would this be a correct use?

  • 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.

  • Jesper Allermand says:

    The only reason for using the DL element is because it describes some kind of semantic logic. Who needs semantics? Machines do, and users of assistive technology (AT).

    If the element is broken by screen readers (ref. “presenting dt and dd as a “flat” list.”) I see NO point what so ever in using the DL element.

    Would appreciate any comments/link concerning this issue from people who have good screen reader insight!

  • 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.

  • Too bad about the <di> element going nowhere. Also too bad that we cannot validly place a <div> within a <dl> for the purpose of styling.

    I find description lists useful for stuff like account info:

    <dl>
    <dt>Name</dt>
    <dd>First Last</dd>
    <dt>Email</dt>
    <dd>account@domain.com</dd>
    </dl>

  • Join the discussion.

    Some HTML is ok

    You can use these tags:
    <a href="" title="">
    <abbr title="">
    <b>
    <blockquote cite="">
    <cite>
    <del datetime="">
    <em>
    <i>
    <q cite="">
    <strong>

    You can also use <code>, and remember to use &lt; and &gt; for brackets.