SimpleQuiz › Part III: Heading and List

This one might divide the answers a bit, and is surely something I’d like to know people’s opinion on. It could, however, be just splitting hairs. Is there really a big difference? Does it really matter or is it six and a half of one, half a baker’s dozen of the other? If so, we’ll move right along to the next question.

Q: Which of the following is more semantically correct?

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

See all quiz questions and wrap-ups collected in order.

28 Comments

  1. paul hammond says:

    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?

  2. Robbert Broersma says:

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

  3. mados says:

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

  4. Dave S. says:

    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.

  5. Keith says:

    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.

  6. Brad Smith says:

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

  7. Priit Laes says:

    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.

  8. Brian says:

    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>

  9. Anonymous says:

    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.

  10. aliotsy says:

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

  11. Dan says:

    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.

  12. web says:

    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?

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

  14. Paul G says:

    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)

  15. RocketFace says:

    A.
    Clearly.
    Now tell me what I’ve won.

  16. web says:

    Yes!! The KitKats have made it onto this list, oh so yummy.
    Thanks D-man

  17. Bob says:

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

  18. Jeff says:

    I believe that Fresca is a better soda, myself.

  19. Dan R. says:

    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…

  20. Dan says:

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

  21. besh says:

    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>

  22. Minz Meyer says:

    hmmmm….what about extending the DTD?

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

    okay, maybe too far away ;)

  23. 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 :) )

  24. Jai says:

    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.

  25. James says:

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

  26. Bob Easton says:

    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.

  27. Chris says:

    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.

  28. Egor Kloos says:

    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.