SimpleQuiz › Part III: Heading and List

paul hammond → www.paranoidfish.org

what about:

<dl>
<dt>A List of Stuff</dt>
<dd>
<ul>
<li>Robots</li>
<li>Monkeys</li>
<li>Vikings</li>
<li>KitKats</li>
</ul></dd>
</dl>

is this any worse or better than the other options?

Robbert Broersma

I choose A, ‘cause a definition-list consists of a term and a description. “Robots” is not a description of the term “A List of Stuff”.

mados → maettig.com/

Simple answer, I think. “Robots” is no definition for “A List of Stuff”. “A List of Stuff” is no term. Therefore B is wrong.

Dave S. → www.mezzoblue.com/

This is a question I ask myself a lot. I’m with Robbert though. This particular list is a list, not a set of descriptions for a particular term.

My main question on the subject though, is what constitutes a term/definition pairing? Is the term a word, can it be a phrase, can it be an image…? If you take this article for example, and scroll down to the ‘In Summary’ heading, you’ll see a definition list. My ‘term’ is a summary phrase, and my ‘definition’ is an expanded paragraph supporting/clarifying that phrase.

Is that a valid use of a definition list, or is that an unordered list? I’m not confident, either way.

Keith → www.7nights.com/asterisk/

This one is a bit sticky, and some might see as a toss up. I think I’d go with A because this seems to be an ordinary list not a definition list.

But then again, I imagine this issue (with a different example) could come down to semantics (pardon the pun) and there could be an issue over what constitutes a definition, etc. All too often semantic discussions just slow things down.

At that point either would be fine, but in this case A is the correct answer in my mind.

Brad Smith → www.mindsmith.net/

I think A is correct by many of the reasons already mentioned.

Priit Laes → amd.colony.ee

Hehe… for first i was shocked when i saw the <hn> tag. After few seconds i realised that it actually meant header with size n ;)
The variant a is cleaner and more readable. Variant b seems also harder to understand.

Brian → it.sweeting.net/

I’m with everyone else, the answer is A.

This would make B semantically correct:

<dl>

 <dt>dweeb</dt>
 <dd>young excitable person who may mature into a nerd or geek</dd>

 <dt>hacker</dt>
 <dd>a clever programmer</dd>

 <dt>nerd</dt>
 <dd>technically bright but socially inept person</dd>

</dl>

Anonymous

A, for most of the reasons listed above. One would expect a dd tag to give meaning to the dt tag, rather than list its contents. An equivalent to B could be:

<dl>
<dt>Fruit Salad</dt>
<dd>Bananas</dd>
<dd>Apples</dd>
<dd>Oranges</dd>
<dd>Melons</dd>
</dl>

That markup tells us what’s in a fruit salad without defining what a fruit salad is, which implies that the markup is semantically incorrect.

aliotsy → www.thethousand.net

Boy, aren’t I clever, posting that without entering my name.

Dan → www.simplebits.com

paul - Good idea, and I actually think that’s an interesting way to present it. I’m partial to using method A all over the place, but it seems weird to me to have the heading uncontained by the list that follows it and I wish there was some sort of “title” or “caption” (as in tables) tag for unordered lists that could be used to define what the list is, like:

<ul>
<title>This is the Heading</title>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<ul>

Looks like we get to look forward to Navigation Lists in XHTML 2.0 which add the <label> element to define within the list itself. Makes perfect sense. Of course we have to wait 5 years to use it, and there should maybe be something similar for unordered and ordered lists as well.

Robbert - spot on, in that the list items are not definitions of the term.

Dave - It’s instances like the one you’ve shown where it certainly gets sticky. While the elaborative text isn’t technically a defintion of the text above it — personally, I do think structurally it makes sense that way.

Your term “pairing” I think is also worth mentioning again, and probably a good hint to gauge whether or not to use a definition list.

web → www.ericwebster.net

This is really when I show my age in semantic development. I was searching on
W3C for a <hn> tag!!

Then I read Priit’s post about it actually being a headline (H1 .. H6) tag.

I would assume A, a header (headline) to me is a very short title or description
about what your about to read. This doesn’t seem to be a definition of
any sort.

Which brings me into the question as to how do you decide on a page when to
use a H3 as opposed to an H4 tag. Is it at my judgment? Or in going down the
page do I just descend importance (high importance being H1)

Is there a difference between <h5> and a <h6> in relation to SEO?

Anne van Kesteren → annevankesteren.nl/

How about nested lists? If you have multiple list, this could be a way. Though I still use example A myself. It gives some extra information for Google, that’s why I like it (though you could use header inside a list…).

<ul>
<li>List A
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>List B
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
</ul>

Paul G

Hmm. I think we’ve pretty much covered it here. It’s a case of belonging to vs. defining. Obviously, (as others have stated) the items in the list do not define “A List of Stuff”, they belong to (or are a subset of) “A List of Stuff” Something like:
<dl>
<dt>A List of Stuff</dt>
<dd>A collection of non-specific items arranged in a discrete fashion</dd>
</dl>
would be a more appropriate use of the <dl> tag.

Also, I see that KitKat bars have gotten their proper respects after being so heinously omitted from the previous quiz 8)

RocketFace → www.zeldman.com/

A.

Clearly.

Now tell me what I’ve won.

web → www.ericwebster.net

Yes!! The KitKats have made it onto this list, oh so yummy.

Thanks D-man

Bob → www.bobsawyer.com

I came late to the party, but I chose “A” before I read everyone else’s answers, so… :-)

Something I’ve been doing lately that I need to re-examine, I think, is using Hn + P where a DL would be more semantically correct. For instance:

<h4>This is something</h4>
<p>Here’s the description of that something</p>

Or, something else I did even more recently:

<h4>Joe John Jimbob Smith<br />A really great guy who wrote a really great book</h4>

I’ve really got to get better about this stuff… :-)

Jeff → www.rustedrobot.com

I believe that Fresca is a better soda, myself.

Dan R. → superfluousbanter.org/

A is of course the best method, for all the reasons listed above (I just wish one of these times I’ll see the question before anyone else does — it’s tough to seem like I have any original ideas with all these great thoughts posted before mine ;-)

One thing that will make the presentation of the question clearer is italicizing the “n”:

<hn>A List of Stuff</hn>

See? I can contribute something original…

Dan → www.simplebits.com

Dan - Thanks for the suggestion, I’ve just made that (very original) change. ;-)

besh

A is right.

This is definition list:

<dl>
 <dt>Ygg'drasil</dt>
 <dd>The tree of the universe, a huge ash which holds an important place in Scandinavian mythology</dd>
</dl>

That’s how I understand the specification.

…and this could work as well:

<dl>
 <dt>Lister</dt>
 <dd>What can I do?</dd>

 <dt>Holly</dt>
 <dd>You've gotta deal with your grief, man. Breakup is very much like a bereavement: it's usually followed by a cremation and some sandwiches.</dd>
</dl>


Minz Meyer → www.minzweb.de

hmmmm….what about extending the DTD?

<stuff>
<descr>List of stuff</descr>
<item>Robots</item>
<item>Monkeys</item>
</stuff>


okay, maybe too far away ;)

Stefan Walter → blog.hessendscher.de/

I would prefer A – for a simple list of things I don’ see the point why I should use a definition list.

But this question is way more controversal than the other questions :) So this might end up in a discussion of personal taste – as always the discussion on the questions is even more interesting than the question, I can’t wait to hear more opinions on this (and of course I can’t wait for the next question in the quiz :) )

Jai → www.jaiandbecky.com/

Hmmm… what if Robots, Monkeys, Etc. are the names of a list of stuff? I mean, what if some guy has 4 lists of stuff, and he named them Robots, Monkey, etc… Then those things would be definitions of a list of stuff. That’s twisted, but ture… But in general, A is correct.

James → gholsbane.moap.net/

I recently rewrote the HTML of Bungie.net for a little fun and made some probably despicable decisions regarding definition lists.

I am a relative newcomer to the web design world and have been coding tableless XHTML/CSS exclusively since I became serious about it. My lack of experience has been a mixed blessing, though. On the one hand I am learning new techniques at a remarkable rate and don’t have the time to establish bad habits. But, from the other perspective, I tend to make quite a few laughable errors.

Usually after I gain an understanding of proper XHTML and CSS usage from reading the experts’ blogs, my techniques are set straight. Help me sort this one out :)

Returning to to dl’s, I’d be interested to know how much of my usage was inappropriate at the above link. I realise now that the poll should be in a table as it is tabular, but should the change log, events, inside and some of the links be marked up as h elements followed by paragraphs and unordered lists as per option A above?

Also, I too was confused by hn, maybe you should label it h#?

Bob Easton

A is more semantically correct as many have already said. It also has higher weight or value for devices other than computer screens. Screen reader programs all have hot keys for reading headings and normal lists, and would therefore make A more accessible than B.

For “web,” yes there is logic to selecting which heading to use. Proponents of structured markup (derived from the SGML school of thought) use headings hierarchically, like an outline. So, use them in ascending order. Then style them to look like what you desire. That order is, again, an important accessibility consideration.

Chris → today.icantfocus.com/blog/

I find besh’s example intriguing. I may now have to tinker. :-)

I would normally use an unordered list for the main menu.


<ul>
   <li><a href="/" title="Return Home">Home</a></li>
   <li><a href="/about/" title="About This Site">About</a></li>
</ul>


However, a definition list makes more sense to me if I wanted to display the description of each main menu item on the page (like a submenu bar or a label box) instead of just adding the title attribute to the main menu link tags.


<dl>
   <dt><a href="/">Home</a></dt>
   <dd>Return Home</dd>
   <dt><a href="/about/">About</a></dt>
   <dd>About This Site</dd>
</dl>


I’d probably leave the title attributes in the links.

Egor Kloos → www.dutchcelt.nl/

Yes it’s A. Why? Well, just scroll up.

This example also shows that understanding the content and it’s context can be very important. Let’s say that the answer ought to be B, because the text for the DT was chosen carelessly. Should we just follow the actual text or have the title rewritten to fit it’s context? It’s obvious that the title ought to be fixed because if we are using this in a truly semantic driven website the content could be miss-assigned. The semantics could breakdown, which would be bad. Semantic systems need to be accurate for them to be reliable otherwise users won’t trust the website. Accuracy is key to being useful even more so than with syntactic websites.

Writing HTML pages doesn’t seem so easy any more.

Niket → www.prism.gatech.edu/~gte207x/

I don’t believe there is a straightforward “yes” or “no” in this question.

In this specific example, B is clearly incorrect. The list of items in <dd> does
not DEFINE/DESCRIBE the <dt> term.

For the fruit salad example, all of the following are appropriate
————
<h#>Fruit Salad</h#>
<ul>
<li>Bananas</li> <li>Apples</li> <li>Oranges</li> <li>Melons</li>
</ul>
————
<dl>
<dt>Fruit Salad</dt>
<dd>A salad consisting of fruits of different types such as
<ul> <li>Bananas</li> <li>Apples</li> <li>Oranges</li> <li>Melons</li>
</ul>
</dd>
</dl>
————
<p>I love my fruit salad. One of my favourite combinations is
<ul>
<li>Bananas</li> <li>Apples</li> <li>Oranges</li> <li>Melons</li>
</ul></p>
————
<h#>Recipe for Fruit-Nut salad (queer)</h#>
<ul>
<li>Fruits
<ul>
<li>Bananas</li> <li>Apples</li> <li>Oranges</li> <li>Melons</li>
</ul> </li>
<li>Nuts
<ul>
<li>Pecans</li> <li>Raisins</li> <li>Almonds</li>
</ul>
</ul>
————

vlad → vlad.neosurge.net/

a, because that is what a heading and a list should look like. <dt> and <dd> are for terms and definitions. as already mentioned, “a list of stuff” is not a term defined by robots, monkeys, vikings, and kitkats.

saying that a definition list should be used in this situation is the same as saying that it should be used for a paragraph with a heading:

<dl>
<dt>weblog entry for 09/05/03</dt>
<dd>today i did this and that and…</dd>
</dl>

vs

<h2>weblog entry for 09/05/03</h2>
<p>today i did this and that and…</p>

isn’t the latter more logical? if there is a purpose for headings, this is it.

web → www.ericwebster.net

Wow, we’re geeky.

Anne van Kesteren → annevankesteren.nl/

Dan,

Since the n is a variable wouldn’t it be normal to markup this with the element ‘var’?

Lea → lealea.net/

Vlad, er, have you ever visited Tantek C’s site? Those in the know will understand what I’m getting at…

dbowman → www.stopdesign.com/

Well, this conversation certainly seems to be one-sided so far. Which is what prompts me to respond. It needs a little more controversy.

My answer: ‘C’: depends.

I could say ‘A’ in this situation, merely because the example is so simple. There’s one main thing and one related list. But I think everyone has written off ‘B’ way too quickly.

Most people either hear the word “definition” in definition list, and immediately think it must be confined to glossary-like terms and descriptions. Or they only read the first part of the specification on definition lists, and ignore the sentence which immediately follows the examples:

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.

Clearly, there are uses for definition lists far beyond the traditional term and description. Definition term just happens to be the exact equivalent of <dt>, and definition description is the equivalent of <dd>. But the spec lists an additional example to prevent us from limiting our preconceptions for uses of a definition list.

In the additional example from the specification, the words of the speaker may not have anything to do with “describing” or “defining” the speaker. The words are simply “paired” with the speaker: this statement goes with this speaker. (Ah, here’s that “pairing” concept again.)

This quiz question partially leads you to guessing ‘A’, because, as stated before, there’s only one main thing and one related list. But expand the example and give it context, where there may be multiple things, each with their own related “concepts”:

Robots
   Hal
   Aibo
   Jeeves4000
Primates
   Monkey
Fuel & Energy Sources
   Ethanol
   Electricity
   KitKat

To do this with the heading/ul approach, we’d need three separate headings and three separate unordered lists. The markup wouldn’t be that complicated, but there would be no relationship between each list, other than appearing “near” each other in the markup. By simplifying the markup even further with the following approach:

<dl>
  <dt>Robots</dt>
    <dd>Hal</dd>
    <dd>Aibo</dd>
    <dd>Jeeves4000</dd>
  <dt>Primates</dt>
    <dd>Monkey</dd>
  <dt>Fuel & Energy Sources</dt>
    <dd>Ethanol</dd>
    <dd>Electricity</dd>
    <dd>KitKat</dd>
</dl>

we create clear relationships. Not just between each thing and its related list, but also between each thing. We also shorten the markup required to do so.

As hinted before, definition lists are about creating relationships between concepts/things. Be it one thing and a set of related concepts, or multiple things and one concept, or multiple things and multiple concepts. Sure, a single heading and an unordered list might seem to be an obvious answer for this example. We tend to associate multiple items with ul’s and ol’s, and reserve dl’s for single item/concept pairings. But it may not be so cut and dry when this example is given more context.

Our only limitation with definition lists is that the <dt> is limited to inline content, meaning it can’t contain a <hn> tag to emphasize its level in the document hierarchy (beyond it’s inherent “definition-termness”).

I’m not sure if Dan intentionally set a trap for everyone to fall into or not. He also led us by titling this question Heading and List, which could have also been called Term and Description to lead the opposite direction. I’m not necessarily claiming that ‘B’ should be the correct answer. Nor that I didn’t fall into the trap myself on first glance. However, I do think too many people underestimate uses for definition lists, limiting their full potential. Don’t limit ideas for definition lists strictly to terms & descriptions. It’s not what the spec intended.

Niket → www.prism.gatech.edu/~gte207x/

Tantek does not use <dl> for his markup, he uses <ol> instead. Well, it is an ordered list, because the blog entries are arranged in the order of posting date and time.

But I don’t quite agree with the use of <h1> or <h2> within a list. <h1> is a page heading. <h2> are section headings. If you have a list, how can you define a new page or new section within it?

For example, cannot do the following:
————
* [New Section]
    - Item
    - Item
* [New Section]
    - Item
    - Item
————
in a semantic language. A list is not used to define a section/subsection heading.

[On a side note, posting in weblogs has increased number of hits on my webpage. Yippieeee!! :-)]

Dan → www.simplebits.com

Doug - “I’m not sure if Dan intentionally set a trap for everyone to fall into or not.”

Heh heh. Intentionally? No. Subconsciously? Maybe.

I’m thinking of just using your comment as the wrap-up for this one :-). And it’s controversy and your answer of ‘C’ that I was intending to get — that there probably isn’t a right or wrong answer. I could’ve created a little more context for the examples to stir things up a bit more.

I do feel a little better of my past uses of definition lists now — not just keeping them for strict term and description pairs. I almost see a weblog as a defintion list:

Title of Post
    Description of post and entry text

Even an RSS feed uses the names “title” and “description” for these values.

I agree on inline only elements in a dt, but I’m curious whether multiple paragraphs and/or other markup belong within dd elements. I say yes, when part of the description, but I get the feeling others believe that the description should merely be a quick line item.

Good stuff, Doug.

Update: from the W3 spec:

“The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block-level content.”

Block level in dd. Good.

dbowman → www.stopdesign.com/

I haven’t bought into the idea of putting an entire weblog into a list yet (as Tantek does) be it unordered, ordered, or definition. But just as Dan and I are trying out now, both of our sites use definition lists to provide structure to existing comments:

<dt>comment date/time, person</dt>
  <dd>
    <p>Multiple block-level elements in one comment.</p>
    <p>Multiple block-level elements in one comment.</p>
  </dd>

Perhaps the typical posts of a weblog aren’t too different. However, search engines may not treat titles wrapped in a <dt> with the same priority as they would a <h2>. Something to consider before charging down the line of making everything a list.

Nils T. Devine → www.nilsdevine.com/

Another use of definition lists that we have been bantered about at work is in the key/legend of a graph. The icons would be the terms with what they represent as the description.

Or how about this use: on the “updated” page of a database application, the field names as terms, and their new values as definitions?

zlog → zlog.co.uk/

My latest interview is marked up as <dl>, <dt> and <dd>.

Is that not a good example of when to use a definition list?

kirkaracha → www.magneato.com

You could also use dl to mark up a list of categories:

<dl>
 <dt>Case Studies</dt>
  <dd>Insightful accounts with lessons about what worked and what didn't. First-hand accounts from an insider's point of view.</dd>
  <dd>(11 articles in category)</dd>
 <dt>How to: Deliverables & Documentation</dt>
  <dd>Tips, techniques and step-by-step guides to creating effective deliverables. </dd>
  <dd>(15 articles in category)</dd>
</dl>

Each category has two pieces of information that describe it: a description, and the number of articles in the category.

(The example list, at Boxes and Arrows, is not marked up as a dl.)

Ed Sharrer

ugh… this will teach me to take a day off. I miss all the good conversation. :}

Probably way too late, but I have another suggested use of a definition list — calendar/schedule entries.

If you have a schedule of events for a conference, for instance, why couldn’t you list them like this:


<dl>
   <dt>Friday, September 5</dt>
      <dd>Registration</dd>
      <dd>Cocktail Reception</dd>
   <dt>Saturday, September 6</dt>
      <dd>Morning Sessions</dd>
      <dd>Lunch</dd>
      <dd>Featured Speaker</dd>
</dl>


If I understand Doug’s comment correctly, then this markup would be an acceptable interpretation of a definition list. Each day in the list is described by the events of the day.

Actually, I’m taking this a step further in a page I’m coding as we speak. Since each event describes something that happens on a given day, aren’t the event details just a description of each event? So I’m nesting definition lists…


<dl>
   <dt>Friday, September 5</dt>
      <dd>
      <dl>
         <dt>Registration</dt>
            <dd>5:00pm - 6:00pm</dd>
            <dd>Hotel Lobby</dd>
         <dt>Cocktail Reception</dt>
            <dd>6:00pm - 8:00pm</dd>
            <dd>Hotel Lounge</dd>
            <dd>Come join your colleagues for cocktails and lively conversation.</dd>
      </dl>
      </dd>
   <dt>Saturday, October 6</dt>
      etc…
</dl>


Which would give you:

Friday, September 5
     Registration
          5:00pm - 6:00pm
          Hotel Lobby
     Cocktail Reception
          6:00pm - 8:00pm
          Hotel Lounge
          Come join your colleagues for cocktails and lively conversation.
Saturday, October 6
     etc…

So, I guess before I get too far down this road, I’d love to get some feedback on whether this is semantically appropriate.

Mordechai → pellerwep.com

Pardon the very late comment, but I’ve just found it.

While in this particular case, “A” fits best, I think the case falls into a very gray area. My feelings are that for a stand alone heading/list pair without any logic suggestion of additional related lists (which seems to be the case here), “A” is suggested. However, if there is even theoreticly a realistic possiblity, irrespective of chances of actual realization, of other lists, or in other words, additions are logicly suggested, then a dl would usually be better.

Also, when one or more discriptions are related to two or more independent but related terms, a dl would usally be better.

Tantek → tantek.com/log

First, I chose “A”. Other folks have pointed out what my markup actions (e.g. blog markup) imply about my opinions with respect to list markup.

However, regarding definition lists, I think there is a broad spectrum of opinions, some of them valid (defensible within the context of the specification where DL etc. is itself defined, so to speak).

I tend to lean towards the “definition lists are for defining things” side of the spectrum. I think definition lists are much more meaningful when we use them as such.

Here is one such example of using definition lists to actually define things: XHTML Meta Data Profiles (XMDP).

Doug pointed out that HTML4 does say (using <em> markup because this comment system doesn’t support <blockquote> or <q> tags!):

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.

Note the “for example”, which immediately relegates this to “informative” (as opposed to normative) status, since all examples in the specification are informative.

Also, there is a much better way of marking up dialogues [sic], and that is with a sequence of <blockquote> and <cite> elements which are specifically there for marking up quotations. What is the documentation of a dialog if not a sequence of quotations? You could even place them in an ordered list to emphasize the fact that you are capturing the specific order that things were said in the dialog.