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). Each group must consist of one or more names (dt elements) followed by one or more values (dd elements). Within a single dl element, there should not be more than one dt element for each name.

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>
  <h1>The article element</h1>
  <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>
    <h2>Glossary</h2>
    <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!

52 Responses on the article “The dl element”

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>

Mike Robinson says

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.

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

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

My Form

Name:

Email

wds says

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

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.

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.

NIels Matthijs says

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?

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

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?

Oli Studholme says

@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

一路(bishua) says

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.

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.

Mike Robinson says

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

Mike Robinson says

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

martin feuchtwanger says

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.

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.

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/

Aaron W. Swenson says

@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)

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.