Using HTML Lists Properly

Posted May 21st, 2007 by Mike Cherim

If you’re a person who spins around fast when someone shouts “hey, you, web developer,” you probably use HyperText Markup Language (HTML) lists often — or you should anyway. But do you use them correctly and effectively? Let’s take a closer look at the three list types available, figure out what they’re best used for, and how to do so properly. Also, let’s see about putting them to use creatively, with imagination and a little bit of style.

List element types

As I wrote, there are three list types in the specification. They are the unordered list, the ordered list, and last but not least, the definition list. They are all block-level element-built structures that can contain block-level elements. All of these lists also share a purpose in that they’re used to organize, separate, add logic, and offer meaning to the listed item content. From there their uses differ. Let’s take a closer look at them.

The unordered list

As its name implies, this list organizes without regard for the ordering of its listed items. It’s useful for content such as that posted below in the unordered list:

Jump or skip links.
Navigation links.
Images or icons.
Some user controls.
Tags (unless ordered).
A grocery/shopping list.

To make a list like this, use the following mark-up:

  <!--ul = unordered list, li = list item-->
 <ul>
  <li>Jump or skip links.</li>
  <li>Navigation links.</li>
  <li>Et cetera…</li>
 </ul>

Now let’s add some order to this chaos.

The ordered list

The ordered list type is used when the listed item content is supposed to be in a special order so as to add meaning. By default, ordered lists are numbered. The instructions in the ordered list below can serve as an example.

Remove the two screws on the back of the unit.
Carefully remove the cover and watch out for the…
…spring. Go ahead and look for it. I’ll wait.
With a toothpick, remove the spent battery.
Insert a new battery plus (+) side down.
Replace the back cover and spring carefully.
Put the screws back in and test the unit.

To make a list like this, use the following mark-up:

  <!--ol = ordered list, li = list item-->
 <ol>
  <li>Remove the two screws on the back of the unit.</li>
  <li>Carefully remove the cover and watch out for the…</li>
  <li>Et cetera…</li>
 </ol>

I can barely define how cool this next one is.

The definition list

This list type is used in a manner consistent with its name. If something is to be defined, it should be organized in a definition list like this:

By defined, you mean like a glossary?: Exactly. You get it. The word or term to be defined followed by its definition (Get more info).
Can it be used for Frequently Asked Questions (FAQs)?: FAQs are another great example. First the question, then the answer. Makes perfect sense. It has meaning.
How about using it for an interview transcript?: Yes! That could be perfect, but you’d have to add the blockquote element within the dd element to be proper… maybe the cite element too (Get more info).

To make a list like this, use the following mark-up:

  <!--dl = definition list, dt = definition term, dd = definition description-->
 <dl>
  <dt>By defined, you mean like a glossary?</dt>
   <dd>Exactly. You get it. The word or term to be defined followed by its definition (keep reading for more complex examples).</dd>
  <dt>Can it be used for Frequently Asked Questions (FAQs)?</dt>
   <dd>FAQs are another great example. First the question, then the answer. Makes perfect sense. It has meaning.</dd>
  <dt>Et certera…?</dt>
   <dd>Yes! Et cetera…</dd>
 </dl>

Okay, now let’s combine our resources and get clever.

Combining lists

The first way to combine lists is to nest them or create sub-lists. You can do this and more because, as I wrote, lists are block-level elements that can contain block-level elements. An unordered list with a sub-list is made by using this mark-up:

 <ul>
  <li>This is a list item.</li>
  <li>This is a item with... <!--This list item is left open to contain the sub-list-->
   <ul>
    <li>A sub-list item.</li>
    <li>And another one.</li>
   </ul>
  </li><!--The open list item is closed here-->
  <li>And this is a list item.</li>
 </ul>

I’m not going to show an example of that right now (see Styling Lists to see it in action). Instead I’m going to get a little bit more creative by combining a couple of list elements so as to provide greater meaning. I’m going to create an ordered list of tasks I have to perform (in order), and one of those tasks will require the use of a list of unordered items.

Go to a breakfast meeting.
Get a haircut at lunch.
Go shopping after work and buy:
- French’s Frogs’ Legs
- Spamburger Helper
- Chemical Cola
- Bucket of Lowfat Lard

This is done like so:

 <ol>
  <li>Go to a breakfast meeting.</li>
  <li>Get a haircut at lunch.</li>
  <li>Go shopping after work and buy:
   <ul>
    <li>French's Frogs' Legs</li>
    <li>Spamburger Helper</li>
    <li>Et cetera...</li>
   </ul>
  </li>
 </ol>

But you haven’t seen anything yet.

Anything goes

Remember the definition list? The glossary and the transcript mentions, specifically? I told you I’d offer more. Well here it is:

Detailed glossary example

Here I will offer a glossary word with multiple meanings.

Foo

Pronounced as foo. Derived from the Latin Fooii

(n.) A nonsense word used by web geeks.
(n.) The way a baby says the word food.
(v.) Playing solo Foos ball.

It’s an ordered list within a definition list. It’s made like this:

 <dl>
  <dt>Foo</dt>
   <dd>Pronounced as <em>foo</em>. Derived from the Latin <i lang="la">Fooii</i>
    <ol >
     <li>(<abbr title="Noun">n</abbr>.) A nonsense word used by web geeks.</li>
     <li>(<abbr title="Noun">n</abbr>.) The way a baby says the word food.</li>
     <li>(<abbr title="Verb">n</abbr>.) Playing solo Foos ball.</li>
    </ol >
   </dd >
 </dl >

Note: I think the use of the “i” element above is actually okay to use for declaring/defining language according to the spec (that’s why it’s not deprecated). It’s also useful for posting dream sequences, thought, etc. I mentioned this once on the Web Standards Group mailing list. While not everyone agreed, Lachlan Hunt had gratefully posted a link to a part of the spec supporting exactly what I was saying, but I have since lost the link and finding stuff on the World Wide Web Consortium (W3C) site can sometimes be a bit difficult. This may be a separate topic for another time perhaps, but if anyone has thoughts…

Okay, next example.

Detailed transcript example

Here I will offer an example of a definition list to render a transcript of an interview between two people. This would ordinarily be styled to look a lot more transcript-like, but in any case, here it is:

Have you been around for a while?: I’ve been at it since 1962, so, yeah.

It’s marked up like this:

 <dl>
  <dt>Have you been around for a while?</dt>
   <dd>
    <blockquote>
     <p>I've been at it since 1962, so, yeah.</p>
    </blockquote>
   </dd>
 </dl>

In this example, citations were omitted with the assumption the speakers are identified before the piece. Perhaps, though, they could also be defined in citations before the passage something like this (Do note, I’m iffy on how valuable or proper this would be):

 <dl>
  <dt><cite>Interviewer:</cite> [...] </dt>
   <dd><cite>Interviewee:</cite>
    <blockquote>
     <p> [...] </p>
    </blockquote>
   </dd>
 </dl>

Being able to put block-level elements inside of lists opens up a world of possibilities, this is just the beginning (my blog’s comments are contained in an ordered list, for example). You just have to be careful you enhance semantic meaning instead of complicating it and confusing matters. Use your imagination, but try to apply some logic as well.

Now let’s get stylin’.

Styling lists

Here are some random styling-related tips and ideas you might want to consider. This is also an example of an unordered sub-list nested within an unordered list.

Zeroing out all padding and margin of list structures and elements is a good idea so as to establish an even cross-browser baseline from which to work. Zero is your friend.
Try changing the list-style-type. This styles the bullets of unordered lists and the characters on ordered lists. Check out this reference to list-style-types. You can also to remove bullets or numbers:ul, ol { list-style-type : none; }You can then use images and as list-type-image (markers) or as background images as I do here on my blog.
Speaking of bullets and numbers, there are several options available. The ordered list for example can render as numbers, uppercase letters, lowercase letters, uppercase Roman numerals, and lowercase Roman numerals. Any combination of these might be found in a book’s index, for example.
Float your lists to place them alongside or nested within your content or page structure. Do be sure to define a width in your measurement unit of choice, though.
Have hours of fun placing borders and backgrounds on list structures and their elements. Go wild, be creative.
Change the positioning of your list items’ content in relation to their marking bullets or numbers using inside or outside list-style-position.
Change the display of your lists. They will render vertically by default. To display them inline or horizontally instead, you have to specify this. Try this code:ul li { display : inline; }Here’s more info about list displays. By default, when displayed inline, bullets are not seen. The purposes of this, the first example that comes to mind, is a horizontally displayed navigation menu. Do bear in mind, though, when styling the links on such a menu, especially if you want your links to be block displayed, be sure to apply the style to the anchors (a), not the list items (li).
This article isn’t a style tutorial so I just wanted to touch on a few things. To learn more about styling lists to make them pretty and not just proper, check out these resources:

Your thoughts?

There is absolutely no doubt in my mind that not everyone will agree with my suggestions and the examples I have provided, but that’s part of the game. Many of these subjects have lots of interpretation wiggle room so agree or not, share your ideas.

Note: The examples in this article are valid for Extensible HyperText Markup Language (XHTML) as well.

Filed under Coding & Markup, Do It CSS Style —

38 Responses to: “Using HTML Lists Properly”

Tommy Olsson responds:
Posted: May 21st, 2007 at 1:13 am →

Good writeup, Mike! I’ve seen people struggle with the decision between UL and OL, so I’d like to offer an acid test for those:

Does the meaning of the list as a whole change if you change the order of the list items?

If it does, you should use an OL; if not, it’s an UL. The respective examples in this article are good illustrations. The items in the sample UL can be moved around freely without affecting the meaning of the list, but if you change the order of the LIs in the sample OL, the battery replacement procedure becomes unusable.
Carlo responds:
Posted: May 21st, 2007 at 2:37 am →

The use of “dl” for FAQs/interviews etc is very interesting.
JackP responds:
Posted: May 21st, 2007 at 4:26 am →

Interested to note that you tend to use like I do to mark up foreign languages.

My reasoning is that someone having it read to them will catch the different accent (assuming the reading device is doing its job properly) but someone looking at it purely visually won’t. And therefore italicising it without adding emphasis seems like the perfect solution: it adds something purely visual to compensate for the fact that non-visual users have a different way to make it stand out…

Although the W3C take a slightly different tack with their Internationalization: Styling using the lang attribute page…
Elliott Cross responds:
Posted: May 21st, 2007 at 8:39 am →

Another fine, simple example of some of the most basics of coding! Great stuff Mike!

I have never thought about nesting different types of lists before, but never had the occasion to need to do so, but now I will file this one away for future reference!

Thanks!
Mike Cherim responds:
Posted: May 21st, 2007 at 12:44 pm →

@JackP: I’ve been quietly considering another option in these situations, but I haven’t yet adopted it since I’m still mulling it over. The idea I’ve been entertaining is to use the defining instance element, dfn, to mark changes in natural language.

Example: We enjoyed a lot of food in Italy, but the frutta di mare pizza we had at Giuseppe’s Trattoria was the best.
```
 <dfn lang="it" title="Fruit of the Sea">frutta di mare</dfn>
```
David Hucklesby responds:
Posted: May 21st, 2007 at 1:18 pm →

Interesting post, Mike. It expands on an idea I had here:
http://webwiz.robinshosting.com/toolbox/
There are just two DIVs on that page - the remaining structure is made up of lists. Arguably I should have made the Table of Contents an ordered list, but otherwise I hope it illustrates your concepts.

One advantage is that it seems to make visual sense unstyled.
Robert Wellock responds:
Posted: May 21st, 2007 at 1:47 pm →

I sometimes use the DFN similar to with the “Fruit of the Sea” example albeit it is not that technically robust concerning the language change and title attribute.
Carlo responds:
Posted: May 21st, 2007 at 4:16 pm →

Mike: in Italy we say “frutti di mare” that means “fruits of the sea”.
Good example, though.
Mike Cherim responds:
Posted: May 21st, 2007 at 4:36 pm →

@David Hucklesby: That an excellent example. Great use of a definition list.

@Carlo: Can you tell it’s been a while since I live in Italy? You’re right. “Frutta di Mare” is “Fruit of the Sea” whereas “Frutti di Mare” is “Fruits of the Sea” and that, of course, would be much more accurate since that pizza will have calamari, vongole (clams), mussels, and more “fruits.” Thanks for correcting me on that!
Michael responds:
Posted: May 22nd, 2007 at 4:12 am →

Hi! I have seen some experiments with using definitionlist for Images with annotation: The dt-tag contains the image, the dd tag contains the text, that goes with that image. This can be easily stled to mage a nice image box with visible image description.
But does it make sense?
What Makes a Successful Designer? at reflections responds:
Posted: May 22nd, 2007 at 6:29 am →

[…] [Thanks to Mike, Charity, Tara, Lisa, David Zemen, Paul Johns and Paul B for some fantastic comments on my last post] […]
Mike Cherim responds:
Posted: May 22nd, 2007 at 8:40 am →

@Michael: I think your dt-image, dd-caption practice is a pretty clever idea. I can see its value and the logic behind it. Defining images.
Jim Cook responds:
Posted: May 22nd, 2007 at 9:31 am →

Suh-weet! One learns something new every day. Thanks!
Alex Burr responds:
Posted: May 22nd, 2007 at 9:32 am →

Since discovering the definition list, I have gone absolutely hog-wild with it. One of the coolest things about it is that one DT can be allowed to have multiple DDs, which allows for a whole new range of adding multiple meanings to list elements. For example, a comment list on a blog, or posts to a forum. The DT would be a Title of the post, and multiple DDs could define the Poster, Datestamp, and actual comment. Putting a CLASS on each DD (i.e. “poster”, “datestamp”, etc.) helps give an extra layer of semantic meaning as well as offering style possibilities.
Thierry responds:
Posted: May 22nd, 2007 at 4:28 pm →

Nice article Mike.
I thought I’d mention my use of Definition Lists to mark up FAQs and Gallery of images (as one of the poster has suggested already).
Tom Barta responds:
Posted: May 22nd, 2007 at 6:07 pm →

I think there are about a bajillion places where definition lists make sense semantically, but aren’t used either because of lack of awareness or styling difficulty. Developers use some sort of key-value pairs as the meat and potatoes of their data structures (think Python dict, Perl %hash or PHP $arrays when used associatively), and that’s exactly what definition lists do. I’ve previously used dl myself for a FAQ. I have also seen a lot of form-based markup that uses tables that could easily be migrated to styled lists of any kind (I’m partial to ol for forms, since form inputs are typically sequential, as in this login form).
Mike Cherim responds:
Posted: May 22nd, 2007 at 8:40 pm →

@Alex: You’re right, I use that technique (sort of) on the experiments menu on another site I own. ~~The dt is the year-date, the dds are the article links~~ (see updated info below). Something worth noting about that, though, since the dds are links, is that an automated accessibility validator like WebXact or Cynthia will trip an error for those claiming there’s no link separation. Since it’s a list I have to sort of ignore that error and call it a false positive, but I did find that interesting.

Update: The links on that site use this scheme. I forgot about the months. It’s a dl with a dt for the year, then a nested dl with dts for the months, and dds for the article links. Whew.
```
 <dl>
 <dt>2007</dt>
 <dd>
 <dl>
 <dt>May</dt>
 <dd>Link to a May article</dd>
 <dd>Link to a May article</dd>
 <dt>April</dt>
 <dd>Link to a April article</dd>
 <dd>Link to a April article</dd>
 </dl>
 </dd>
 </dl>
```
Jermayn Parker responds:
Posted: May 23rd, 2007 at 12:32 am →

I have seen the dl used as a FAQ before and it works really well…

I am a little confused with one thing though, are you saying that you should use OL for a menu?? I may have miss-read what you wrote (as I am tired)

Thanks for also answering a question I did have about lists though
Mike Cherim responds:
Posted: May 23rd, 2007 at 12:47 am →

@Jermayn: For a navigation menu I suggest using an unordered list ul. Exceptions might include a menu that makes sense when be broken down like that I linked to in the comment above. (That one uses a definition list dl.) And another exception might involve using an ordered list ol for a menu that was meant to be navigated in a particular order such as a tutorial, or maybe an online book.
Stevie D responds:
Posted: May 23rd, 2007 at 8:22 am →

In this example, citations were omitted with the assumption the speakers are identified before the piece. Perhaps, though, they could also be defined in citations before the passage something like this (Do note, I’m iffy on how valuable or proper this would be)

I’ve been thinking about using dl lists for dialogue, and come to a clear conclusion … don’t!

I’ve seen it suggested that dialogue should be marked up like this:

<dl> <dt>Bob:</dt> <dd>Hi Jim</dd> <dt>Jim:</dt> <dd>Hi Bob, how's it going?</dd> <dt>Bob:</dt> <dd>Not bad thanks Jim. And yourself?</dd> <dt>Jim:</dt> <dd>Pretty cool thanks Bob. Bye</dd> </dl>

I don’t know how I missed this for so long (or how other people did too!), but these are clearly not defining terms, in any way. For a start, you would end up with multiple definitions for each “person” in the script, which doesn’t make any sense. But more importantly, there is no hint of any definition in a dialogue. The dd description does not define the dt term, so it is semantically invalid.

Sorry to anyone who thought this was going to be the solution to transcribing dialogue, but it just ain’t gonna work.
Mike Cherim responds:
Posted: May 23rd, 2007 at 8:53 am →

Hi Stevie D. No arguments from me. For dialog I think a list would be overkill and improper. Even the transcript example, which is a lot more formal, is riding kinda close to the edge of logic, but for conversation dialogue, never.

What I like for dialog is the lowly p tag, but styled like dialog as you would see in a book. I have another article called “Writing Dialogue/Dialog on the Web” which explains doing this in more detail. I think that is the best method.

Next up here on my blog will be a short story that puts that dialog technique to use so we can see it in action.

(Stevie: I removed your dupe comment and fixed your first comment. To write code I’m afraid you have to use < and >. Sorry.)
Thierry responds:
Posted: May 23rd, 2007 at 2:44 pm →

@ Steve D.
It is the specs that suggest using DLs to mark up dialogs. And note that the specs make no reference to the word “definition”, they use “description” [0].

list items consist of two parts: a term and a description

[0] http://www.w3.org/TR/html401/struct/lists.html#h-10.3
Mike Cherim responds:
Posted: May 23rd, 2007 at 3:07 pm →

@Thierry: Silly specs. That seems so wrong in my opinion. Dialog is supposed to be read naturally, not like an FAQ. I’ve never read a book that identified dialog speakers in that way. So, while it does say…

Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.

…I think the W3C is stretching things too much. For something more formalized like a transcript I can see it, but for natural dialog I don’t.

One thing I did get from that, though, is I now know the dd stands for “definition description”
Thierry responds:
Posted: May 23rd, 2007 at 9:22 pm →

Mike,
I see DLs more like the way Joe Clark sees them, I like the concept of appositional pairs very much; hence making DLs a good fit for dialogs
Mike Cherim responds:
Posted: May 23rd, 2007 at 11:19 pm →

Hehe, I don’t know Thierry. Look at the dialog examples below and consider reading a story on a web site. Which seems more natural?

Example 1:

“We had such a great time last night,” Mike said. “I can’t believe we drank all that beer and smoked all those cigarettes.”

“Man, I know what you mean,” Thierry replied, swaying as he spoke. “I don’t think I want to do then again anytime soon.”

“After work good for you then?” Mike asked, laughing and holding his head.

Example 2:

Mike said:

“We had such a great time last night. I can’t believe we drank all that beer and smoked all those cigarettes.”

Thierry replied, swaying as he spoke:

“Man, I know what you mean. I don’t think I want to do then again anytime soon.”

Laughing and holding his head, Mike asked:

“After work good for you then?”

There almost was no example two. Now that I’ve written it, I can’t even imagine how I’d possibly use a definition list to offer rich dialog in a meaningful and semantic way. Consider, even, the default styling of a dl; it doesn’t really even hint at being appropriate for dialog. In the form of an interview, yes, but that I had already stated in the interview transcript reference.

The only thing I think is wrong with the first dialog example is that I should use the <q> element instead of quote marks, rigidly speaking. Other than that, though, I must say I have a strong preference for example 1.

Edit:

Whoa, wait a minute. I did think of a dialog situation where a dl would be appropriate and probably preferred: A screenplay! Example 2 is, well, exemplary of that.
Stevie D responds:
Posted: May 24th, 2007 at 7:37 am →

I did think of a dialog situation where a dl would be appropriate and probably preferred: A screenplay! Example 2 is, well, exemplary of that

Nope, I still don’t agree. <dl> marks up a definition list. A screenplay or script does not in any way conform to a list of definitions; the speaker does not in any way conform to a definition term; the speech does not in any way conform to a description of the speaker.

This is, I hate to say it, a classic example of using an element for its presentational effects, rather than any semantic validity. A definition list, in the default presentation on most browsers, looks pretty similar to how we would format a screenplay - but that’s where it ends.

How about this for screenplay:
<blockquote> <cite>Bob</cite> <q>Hi Jim</q> </blockquote> <blockquote> <cite>Jim</cite> <q>Hi Bob, how's it going?</q> </blockquote> <blockquote> <cite>Bob</cite> <q>Not bad thanks Jim. And yourself?</q> </blockquote> <blockquote> <cite>Jim</cite> <q>Pretty cool thanks Bob. Bye</q> </blockquote>

(As you can tell, dramatic writing isn’t really my forté.)

That way, you have fully semantic markup, each block quote is enclosed in <blockquote> tags, the author of the quote is in <cite> and the quoted text is in <q>. You can then style the <cite> and <q> elements appropriately, to get an appropriate rendering.
Mike Cherim responds:
Posted: May 24th, 2007 at 8:29 am →

@Stevie D: You’re right. A dl for a screenplay isn’t a very good example and it’s not proper. I was lured in by its good looks but it’s not a list. You’re example using the blockquotes is probably a better way to go — though I don’t think you need q elements in it. It’s already a blockquote.
David Arceneaux responds:
Posted: May 24th, 2007 at 10:10 am →

Semantically, a sequence of dialog is more of an ordered list—since the sequence of dialog makes no sense in being placed out of order, and if I were guaranteed an environment where generated content is supported, you could achieve the same presentational effects with the title attribute. However, as a fallback for the strictly pedantic, the <dt> element showing who the speaker is, and the <dd> shows the association between speaker and dialog spoken. For one of my jobs, I have marked up interviews as a <dl>, with none of these concerns confronting me, as LaTeX also has a similar mechanism to the <dl> for dialog lists.

But for the semantically strict and minimal case, I will back myself with some examples.

In the generated content case, the CSS could be:
ol li:before { content:attr(title); }
with the markup being:
<ol> <li title='Caesar'> Friends, Romans, Countrymen, lend me your ears! </li> </ol>

Whereas if I were not guaranteed generated content:
<ol> <li> <dl> <dt>Caesar</dt> <ddFriends, Romans, Countrymen, lend me your ears!</dd> <dl> </li> </ol>
Stevie D responds:
Posted: May 24th, 2007 at 11:30 am →

I don’t think you need q elements in it. It’s already a blockquote

The only reason I used <q> was to put the spoken part in a container element alongside the element giving the name of the speaker, to give more formatting/layout options. I don’t know what would happen if you had <cite>…</cite>… and then set cite to display:block; or float:left;, whether some browsers might make a mess of rendering a seemingly block-level element within a paragraph that also contains inline text. <q> just seemed safer!
The Power of Zero - Beast-Blog.com responds:
Posted: May 25th, 2007 at 10:59 am →

[…] Let’s say you have an unordered list. Without styles it’ll have a margin to the left — which may be a variable. Making the margin zero will wipe the slate clean. From there the margin can be reset to specific value and you gain better control of the final result. Same goes with padding. And this applies to all sorts of elements, not just lists. Headings, paragraphs, blockquotes, etc. […]
Thierry responds:
Posted: May 25th, 2007 at 12:45 pm →

Mike,
I think the issue regarding the specs recommending to use a DL for dialog may be simplier than that.
AFAIK, the specs don’t tell us to use a DL with *that* type of content (i.e. “Thierry replied, swaying as he spoke”). As I read it, only the speaker info should be in the DT. It says “… each DT naming a speaker…”, so for example we’d have:
Mike
“We had such a great time last night. I can’t believe we drank all that beer and smoked all those cigarettes.”
Thierry
“Man, I know what you mean. I don’t think I want to do then again anytime soon.”
Mike
“After work good for you then?”

And I think DLs do a good job here…
50pence responds:
Posted: July 5th, 2007 at 6:13 pm →

Hey, new guy here! Found this article whilst looking for information on definition lists. I like your examples Mike, but I feel that you have not looked further into what else definition lists, and lists in genreal could be used for.

Personally, I think that they could be a real alternative to divsions when it comes to presentation, and they add more meaning to the content they hold whether its a single word, phrase or whole paragraph block. Divisions in my mind mean nothing at all, they are purely used (nowadays) for presentation, something I think that they were not originally designed for. There might be some that might grumble at the thought of a definition list being used for anything other than definitions, but I feel that if they are structured correctly, they can be used to define anything.

@David Hucklesby: Great minds think alike! I like how you have used definition lists for your site layout, and used only two divisions in the process. I though of exactly the same idea as you, just the other day! I curently have a rough two column blog style layout, that also uses just two divisions and a couple of definition lists. The great thing I like about this approach is that if I need more containers, I just throw in a couple more , and carry on - all the while keeping the relationship between the content and structure of the list. No more meaningless division missuse.
Sarah Bourne responds:
Posted: July 25th, 2007 at 4:06 pm →

They are all block-level element-built structures that can contain block-level elements.

The W3C validator disagrees, claiming that I may not put an H2 tag inside a DT, though it thinks it is fine when I put a heading inside a DD. Perhaps it’s considered redundant? In any case, I wanted to do it because assistive tools, such as Jaws, allow users to be presented with and navigate from a list of headings. Sigh … back to the drawing board…
Mike Cherim responds:
Posted: July 25th, 2007 at 4:43 pm →

Hmm. Never tried that. I sort of see dt as a heading (even though it’s not). It might be beneficial if screen readers allowed the dt to have the same weight as headings and include them with heading navigation.

Curious, what is it that you are trying to accomplish, Sarah?
Sarah Bourne responds:
Posted: July 26th, 2007 at 9:07 am →

We would like the topics (Housing, Safety, etc.) on our constituent pages to be level 2 headings: For Residents’ page. We like the idea of using a DL since the heading is defined by the subtopics under it and because DL styles are displayed more consistently across browsers, but we’ll probably go back to nested ULs.
William Clark responds:
Posted: August 4th, 2007 at 11:32 am →

I think the examples given are excellent; I am in search for examples of using lists for navigation.
You didn’t give an example of this type. I would appreciate you giving this type of example.
Mike Cherim responds:
Posted: August 4th, 2007 at 12:34 pm →

You can use a definition list for navigation if it’s sectional, but then again nested unordered lists like my sidebar links will work for that. Generally and unordered list is preferred for your basic navigation menu. An ordered list could be used too, but only if the pages are meant to be sequential, such a an online book may be,
```
 <ul>
 <li><a href="home.html">Home Page</a></li>
 <li><a href="about.html">About Us</a></li>
 <li><a href="contact.html">Contact Us</a></li>
 </ul>
```
To style it, focus on styling of the links themselves, not the li element. Only remember, it you apply bottom or top margin to the links, you will have to apply the same margin to the li element too for IE6. Then style the ul element to position the list.
Dennis responds:
Posted: August 27th, 2007 at 9:44 pm →

Another great article, Mike! I would use <li> for the title of a magazine, etc. And to add to the conversation mark-up debate, here’s a conversation marked up in an unordered list and in microformats.

Sorry. Comments are closed.