Why <dl> instead of <ul> ?

[Percept]

I was just checking out the new www.Zeldman.com design and I noticed he used definition lists for his links lists ( at the righthand side ) while I expected unordered lists for this.

Are there any advantages to use <dl> instead of <ul> for link lists that I'm not awear of ?

[r937]

no bullets to override

[Percept]

Erm, that doesn't sounds like a "legal" reason to do this IMHO ( if that's the only reason ).

[earther]

Erm, that doesn't sounds like a "legal" reason to do this IMHO ( if that's the only reason ).

LOL! A similar problem just came up for me in several places on a project and used or will use the same 'illegal' fix.

[r937]

truly the only reason? you will have to ask the zeldman yourself

legal? of course it's legal

it validates, doesn't it?

[ClevaTreva]

Erm, that doesn't sounds like a "legal" reason to do this IMHO ( if that's the only reason ).

Hi

looking at the standards, strictly speaking, neither ul or dl is for a menu list of links.

However, both allow a url to be included in the li or dd tags. BUT, most folk have stuck to ul's coz they SOUND like they should be used, NOT beacuse standards say they must.

Indeed, correctly structured, a dl list will validate to xhtml1.0 strict no problems with a link in. But then, a lot of gibberish html could validate but not be 'right'.

Don't believe me?

Look at these sample stu nicholls and I did:

[edit: new address]

http://209.216.241.33/stus_buttons.html

There has been (and still is ongoing) a thread just about this demo page (makes me laugh really):

http://www.sitepoint.com/forums/showthread.php?t=166967

The big thing for me was how nicely I could use the fact that there are very few widths or heights set, all the dimensions just cascade out from the text in the link, which gets round the text resize problem.





Trevor

[Percept]

Ok, thanks for the answers. I might switch to <dl> myself then.

[DougBTX]

Are there any advantages to use <dl> instead of <ul> for link lists that I'm not awear of ?

With a definition list (dl) you get a parent child relation ship between the title (dt) and the data (dd). This is a back-to-front way of looking at headers.

You might make the title an <h4> or something, and then have the contents in a <p>. Here, the header is "the most important" part.

In our menu, the title, "links", isn't as important as the links themselves. This means that we could describe the links as "defining" the title, in which case the definition list structure would make the most sense.

The HTML alos looks better, because the titles are inside the same containing element:

<div id="nav">
  <h4>Title</h4>
  <ul>
    <li><a>Link</a></li>
  </ul>
</div>

or

<dl id="nav">
  <dt>Title</dt>
  <dd><a>Link</a></dd>
</dl>

I like the second more. It is more compact.

Finally, this style rule will make a <dd> look just like an <li>:

dl, dt, dd, li, ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

It isn't all that much.

Regards,
Douglas

[r937]

yes, except DT doesn't mean title, it means term

and the zed-man uses your compact form, except he doesn't assign an ID to the DL

[DougBTX]

yes, except DT doesn't mean title, it means term

Douglas = Can't read

[colinr]

i still think that sematically ul or ol with li is better.
navigational links are lists, not terms...

[r937]

web slave, that is arguable

not that i'm gonna do it, i'm just saying it is arguable

<dl>
<dt>For Your Pleasure</dt>
<dd><a href="http://www.pixelhaus.com/new_if/" title="1996 stylie. Table-free design. Tough copy, tangy icons.">Iconfactory blast from the past</a></dd>
<dd><a href="http://www.moorstation.org/typoasis/designers/steffmann/" title="Some magnificent typefaces in this big, free collection.">Dieter Steffmann fonts</a></dd>
<dd><a href="http://annevankesteren.nl/archives/2004/04/min-height-in-safari" title="Using the CSS table model to solve browser compatibility problems.">“min-height” in Safari</a></dd>
<dd><a href="http://www.google.com/search?q=drop+shadow" title="Hat tip: Nirav Sanghavi.">Google: Drop Shadow</a></dd>
<dd><a href="http://www.iconfactory.com/pixelpal1.asp" title="Art for your desktop.">Iconfactory Pixelpalooza winners</a></dd>
<dd><a href="http://www.google.com/search?q=daily+report" title="Hat tip: Nirav Sanghavi.">Google: Daily Report</a></dd>
<dd><a href="http://colleen.typepad.com/first/" title="Cute personal site.">une very stylish fille</a></dd>
<dd><a href="/pleasure/">» MORE »</a></dd>
</dl>

the term is "For your Pleasure"

the definition of that term is all those links

[xhtmlcoder]

I'm not going to argue the semantics but typically each <dt> should be paired with an <dd>. It's nearly as bad as 'Listitis' where the headers endup within lists obviously XHTML 2.0 is leaning towards <nl>.

[ronaldb66]

Although the W3C is less then clear about this, the specification does suggest that there's nothing against pairing one or more dt's with one or more dd's. You could argue however that since a dd can contain block level elements, a number of paragraphs could be a more appropriate way of structuring a multi-part description/definition.

obviously XHTML 2.0 is leaning towards

Eh? Can you point me in the direction of the spec that leads you to assume that? I sort of got lost - again... - on the W3C site trying to find drafts of XHTML 2.0.

[r937]

... since a dd can contain block level elements,

in the zee-man's example, the DD should therefore contain a UL !!!

whoa

[xhtmlcoder]

Don't hold your breath until 2020 or something but: http://www.w3.org/TR/xhtml2/mod-list.html#sec_11.2 may possibly be the future.

[ronaldb66]

Robert,

Thanks for the link; I can't believe I couldn't find it. You're referring to the navigation lists, right? I see possibilities in that, although I have my doubts about the label; I would make it optional, and include it for the other list types as well.