SimpleQuiz › Part II: A List

I’ll try to gradually have the questions get more complicated — but judging by the amount of discussion the first one generated, there’s a lot to be said regarding just about anything. So, while the answer to this one might look as obvious as the first, there could be some additional interesting conversation on the subject.

The second SimpleQuiz question refers to creating an unordered list. Pretty straightforward, right? Let’s see…

Q: When creating a basic unordered list, which of the following is more semantically correct?

  1. Snickers<br />
    Mounds<br />
    Almond Joy<br />
    Butterfinger<br />
    Milky Way<br />
    
  2. <li>Snickers
    <li>Mounds
    <li>Almond Joy
    <li>Butterfinger
    <li>Milky Way
  3. <li>Snickers</li>
    <li>Mounds</li>
    <li>Almond Joy</li>
    <li>Butterfinger</li>
    <li>Milky Way</li>
  4. <ul>
    <li>Snickers</li>
    <li>Mounds</li>
    <li>Almond Joy</li>
    <li>Butterfinger</li>
    <li>Milky Way</li>
    </ul>

58 Comments

  1. D is the best answer. C does not specify if the list is ordered or unordered, though it defaults to unodered without indenting. B is the same, except the list item tags are not closed. And A is just semantically awful.

  2. web says:

    Yeah, I’de go with D as well, but to be noted is the lack of KitKats in your list.

  3. Michael Z. says:

    Mike is right. B and C are also invalid HTML, although leaving the <li> tags open is an acceptable shortcut in HTML but not XHTML.
    There are a few situations where code like A could be used, though. Marking up a poem, for example.

  4. Kevin Brown says:

    I’d have to ask whether using the ‘pre’ tag would offer better semantic mark-up for poems or lyrics?

  5. Keith says:

    D for me too. After reading the spiel at the start I expected a more difficult one.
    Oh and I also agree with Eric on KitKats being omitted from the list!

  6. Bob says:

    D … but I’m not sure you’re going to get much discussion about this one – it’s seems fairly cut-and-dried on this particular issue.
    Of course, I could be wrong about that… :-)

  7. Brad Smith says:

    D. I think this answer is far more clear than the answer to the first part of the quiz was. The main issue here is that using the list elements means a lot more than a simple break. Then the only other thing is to get the syntax right, which D does correctly.

  8. AVERAGE JOE says:

    Yep, D is the right way.
    No one has mentioned that A will validate, even though it’s semantically a train wreck.

  9. Folkert says:

    Did anyone ever fall into the trap of identifying every bit of content on a page as a list, ordered and unordered? I was that close to declaring the bodytext on a page as an inline ordered list.

  10. Dan says:

    Kevin – you ask a valid question. A quick search for “pre” at the W3C actually shows a poem as an example of pre-formatted text. That could mean something…
    Sure, it does appear that this question might be easier to answer — but it never hurts to hammer home the basics. If one person reads the question and comments and says “ah, so I shouldn’t be using break tags to list out my favorite albums” or “oops, I thought leaving out the ul tag was ok” — then I believe it’s worth mentioning.

  11. aliotsy says:

    D makes the most sense semantically, though both A and D are valid XHTML.
    Something I’ve run into though: what’s the minimum number of items necessary to constitute a list? My gut says three, but how would you markup, say, a recipe with only two ingredients?

  12. Mash says:

    D, but…
    …look at A List Apart (div id=”menu”). There are no UL, LI (DL, DD, DT). Is it wrong? (Is it LIst?) ;)

  13. Michael Z. says:

    Kevin’s right: using <pre> for a poem would be better than a bunch of breaks. I’ve become used to not using pre, and code, and tt because I get confused about which is semantic or presentational, and which is block or inline.

  14. I’d have to ask whether using the ‘pre’ tag would offer better semantic mark-up for poems or lyrics?

    That’s a damn good question, and though it’s off topic, it’s a more interesting than today’s quiz. Poems or lyrics are typically made of stanzas with broken lines within the stanzas. So I’d say that:


    <p>
    I got my back to the sun 'cause the light is too intense<br />
    I can see what everybody in the world is up against<br />
    You can't turn back - you can't come back, sometimes we push too far<br />
    One day you'll open up your eyes and you'll see where we are<br />
    </p>
    <p>
    Sugar Baby get on down the road<br />
    You ain't got no brains, no how<br />
    You went years without me<br />
    Might as well keep going now<br />
    </p&gt

    is better than:


    <pre>
    I got my back to the sun 'cause the light is too intense
    I can see what everybody in the world is up against
    You can't turn back - you can't come back, sometimes we push too far
    One day you'll open up your eyes and you'll see where we are
    Sugar Baby get on down the road
    You ain't got no brains, no how
    You went years without me
    Might as well keep going now
    </pre>

    In the first example, the stanza information (with the wrapping ‘p’ tags) and the line break information are both contained in the code and in the second, none of that information is encoded in the tags.

    In a sense, they have semantic equivalence in their content but a variance in where the descriptive information is stored.

    My vote is to store in the descriptive information in the tags themselves, not in the preformatted text, because the meanings of the tags are clearer to a human reader (even if semantically equivlent in some way) than ASCII carriage returns. The tags also allow for more descriptive information to be conveyed. A verse could take a ‘p class=”verse”‘ tag, for example.

    Thanks to Bob Dylan for some cool lyrics.

  15. Michael Z. says:

    I think even one item can constitute a list.
    Let’s say you have a series of lists, each is the tracks on a different music CD. If one of your CDs happens to have only one track, there’s no reason to mark it up differently than the rest.

  16. Paul G says:

    Ok, we all know D is the right answer, but there’s even more to it this time than validity and semantics.
    Marking up a list with the <br /> tags (the only other valid option) severely limits your options when styling the page. You’d have to change the stylesheet and the markup if you wanted to do something as simple as add a border around your list. You’d also have to change the markup if you decided that you wanted the list items to display inline instead of each on a separate line. In fact, you’d have to change the markup to make it look like anything but four lines of plain text (with the same color and font settings as its parent).
    Not only does this markup ignore the idea of semantic correctness, it misses the entire point of valid (X)HTML and CSS, which is to create lightweight pages that are forward compatible and easy to maintain. If you are marking up your lists this way, the person you are hurting most is yourself.

  17. Dan says:

    aliotsy – Another good question, and another trip to the W3C — they say:
    “All lists must contain one or more list elements”
    Interestingly, it could contain just one list item. In fact, I have created lists that contain only one list item, often to take advantage of a global CSS style. Nice to know this is considered ok to do.
    Paul G. – Well said. While the question is easy, it’s definitely useful to hear all the reasons for using the correct answer.

  18. Greg says:

    D.

  19. Matthew Farrand says:

    As regard to poems, the lines are part of the structure of the verse so it seems to me that it’s good practice to mark up the end of each line. As to whether you use <pre> or <br /> to mark up lines of verse doesn’t seem too important to me.
    The XHTML 2 specs seem to agree. They use the example of poetry for both <pre> and <br />

  20. Peter says:

    What about items that aren’t inherently obvious as a list. For example, I have a photography site with lots of pages with thumbnails. Right now these thumbnails are broken apart by DIV tags, each with a class of “home_icon”. If I have a container DIV around a group of thumbnails and the container DIV is labeled meaningfully, does recoding into an unordered list add any further semantic value?

  21. Matt Haughey says:

    I’d say the original question was kind of leading (by mentioning unordered lists specifically), as most designers might not think to put their navigation going down the side in an unordered list, but they should consider it.
    A couple questions related to this:
    When should someone put something in a list instead of using line breaks? Are there any hard and fast rules about what should and shouldn’t go into a list? Personally I do my navigation in styled lists when possible, but I can tell by looking at code from a variety of projects that I could go overboard stuffing every repeating bit of data into a list.
    How to do screenreaders interpret lists? Is there any additional information that lets a blind user know they are reading a list instead of five choices separated by line breaks?

  22. Answer D should be correct, the interesting part begins imho when it comes to nested lists and valid xhtml. That took some time till I figured out that you have to put the next-level list in the li-tag :)

  23. Priit Laes says:

    Well.. when it comes to webdesign (and nested lists) the best type of learning is experimenting.
    PS. I guess all the readers have the same opinion: D is the best… A is acceptable and this what’s between these two should be seen only as examples of how not to use xhtml.

  24. Bob says:

    OK, so I was wrong – this has generated more discussion than I thought it would. :-)

  25. Dan says:

    Matt – Excellent questions. Re: When to use lists — My opinion: when in doubt, use one. I try to imagine an un-styled version, for instance if someone is looking at the page with a very small screen like a phone or PDA, and how the bullet and second line indent of an li helps to define each item — even if there are line breaks there by way of code or by way of a skinny browser window.
    Re: Screenreaders handling lists differently — I sure would like to know the answer to that one as well.
    Bob – heh heh. I guess the actual question is secondary.

  26. D’s the only way to go.
    A’s okay IF you wrapped it in a paragraph tag…

  27. Jai says:

    Um, according to the question, the ONLY answer is D. None of the others are unordered lists. They could be ordered if you chuck the <ol> tags in there.

  28. Dan says:

    Jai – Good point. I guess I’m making the answer a little too obvious. I’ve modified the title slightly.

  29. ok, not going to waste time saying it’s D, but to answer the question above about how screenreaders: yes, they do treat lists differently from normal text broken up by line breaks. JAWS, for instance, announces that it’s an “unordered list with 5 items” (or similar…haven’t got it installed here at home…only at work). i imagine other screenreaders will provide similar information.

  30. Marc says:

    Off topic, but why does your sample text display in justified alignment?

  31. Thank you Matt Haughey! Now we’re getting somewhere.
    I’d especially like to know how screen readers handle lists, either ordered or unordered, as compared to unstructured content. Anyone who can provide some answers on this will be crowned accessibility superhero of the day.

  32. Matt Haughey says:

    JAWS, for instance, announces that it’s an “unordered list with 5 items”
    Thanks for that answer Patrick. Now the question is whether having screenreader users hear that a couple (or more) times on a site is helpful or not.
    It might even hinder the experience, if every navigation item is in a list, if lists traditionally are used for other purposes. I only say that because stuffing nav items into a list is new to me, and seems so tied to visuals. It makes your unstyled content look great, but if it’s a burden to blind users, I don’t know if I’ll continue doing it.
    I suppose a table of contents is traditionally an outline form in books, and a site’s navigation is arguably a table of contents, so it makes semantic sense to do your nav in a list, but I’d love to hear from a few blind users what they think of reading sites using techniques like this.

  33. “Patrick. Now the question is whether having screenreader users hear that a couple (or more) times on a site is helpful or not.”
    well, they will know how many links there are (i.e. whether it’s only 5 items or 50), which will influence how they will choose to navigate the site. if i had 50 links ahead of me, i would probably see if there is a mechanism to skip to the content (e.g. a “skip navigation” link, ideally with an accesskey binding), or maybe – depending on the screenreader – switch to an outline mode which only shows me the structure of the document based on heading hierarchies, and see if i can find the relevant content section that way. iirc, there should also be an option to skip to the end of the list completely (which you obviously can’t do if it’s just a series of lines separated by a line break, as opposed to a nice “enclosed” set of list items).
    i would think that for a regular screenreader user it might be unusual to encounter navigation as lists, simply because not many sites are doing that (blogs and “cutting edge – we use xhtml/css” sites being the exception, at this stage), but once it becomes common practice, i would posit that a visually impaired or blind user would associate announced lists at the beginning (or wherever it’s placed in the source code) of a document as denoting the navigation. again, in isolation this technique will not inherently be better or worse, but together with other features such as the aforementioned “skip to content”/”skip navigation” links, it could have clear benefits.

  34. Max says:

    I remember when I first was looking into xhtml that in the information on closing tags the author (who’s identity is now long forgotten) said you could creat an unordered list like so:
    <ul>
    <li />You
    <li />Me
    <li />Them
    <ul>
    I always write lists as in the example ‘D’ but one day (out of laziness) I did as shown above and doesn’t work properly. I think because you are closing the tags as you open them you lose any ability to style the li using css.
    Anyone else know what I mean (I’m having trouble explaining it).

  35. Allen says:

    Going basically closes and then opens the list item, and then your “You” is some text just floating in a list, but not actually part of an item in that list.

  36. ramin says:

    Although I’m not a poetry buff, some thoughts did rise… While the paragraph+br’s would seem like the semantically best approach, there are situations in which preformatted is the only option. I’ve seen many cases in which indenting is used. If the original author uses it, is should be carried over to the Web as well.

  37. TOOLman says:

    I’ve thought a lot about navigation lists, lately, as I’m doing a major redesign of my site.
    I’m currently planning on having the nav lists after the main content, and using CSS positioning to put them at the top of the document in graphical browsers. The idea is to avoid the “skip navigation” link at the top of every document.
    Unfortunately, this technique will make my layout styles less fluid, since the distance between the top <h1> and the content will have to be hard-coded.
    What do you think of this approach? Is it structurally better to put the nav lists in the header, rather than positioning them there?
    Looking at the unstyled document, I imagine that it would be a relief not having to scroll past that >ul< in every document. At the same time, it may be rather ugly in a graphical browser using a small screen or window, and/or a large font.
    Thoughs?

  38. Jarod Lam says:

    Too easy. Give us some harder ones! :-)

  39. Tobias says:

    The more interesting question for me about lists is: When should they be used?
    Beside listed content in an artikel they are pretty much used for navigation-menu-design. And I think that we all agree that both is a good way to use(?).
    But what about lists with more content like e.g. weblog-messages. Or a forum. Both are listed content and – in case of a forum – sometimes even nested like a good list could be.
    I am right now testing to use OL and UL as boxes for my CSS to display a list of messages (whats new on the site…) and user-comments under an artikel.

  40. dws says:

    A is high-caloric poetry, not an unordered list. D is syntactically correct.

  41. Going back to the point about <br /> in content, how would one express this book chapter in XHTML? (warning, author of “Trainspotting”, so some swear words, but I couldn’t find a better example or what I wanted to illustrate.)
    Irvine Welsh, Sample Chapter
    My thoughts are that the author would like the spacing preserved and that <br />s and empty <span> tags with set widths are actually part of the content – even though they will clash with the CSS.
    What are everyone else’s thoughts on how this should be marked up?

  42. Jazeps says:

    We don’t care whether it is valid xhtml or not. what we care is whether the code markups content and D does: it tells the whole piece is an unordered list marking it’s beginning and end and it marks list elements marking their beginning and ending too.
    A is about formatting and nothing more.
    B is a poor markup – it does tell where a list element starts and if coding goes on this way we can tell that list elements end with a new line carriage, but isn’t a new line carriage too inivisible? MARKUP should be visible. So B isn’t nice. It also does not mark a clear beginning and ending of a list. What if we have too consecutive lists? Where do they end or start?
    C is a nice markup but fails just like B – what if multiple lists come one after another.
    Things become clear only if we know where they start and end. Yes, list items ar markupped, but the bunch of list items is a THING that should have a clear end and start.
    D is perfect.
    Or maybe we are a bit overmarkupped.

  43. Raena says:

    It seems as though the impact and the meaning of that section would be significantly changed if those linebreaks and spaces weren’t there. That’s my usual test for ‘semantically necessary’ versus ‘presentation,’ so I’d say go with the spans and linebreaks.
    This is why I like lists for navigation. The earlier question about ‘When should someone put something in a list instead of using line breaks? Are there any hard and fast rules about what should and shouldn’t go into a list?’
    Well, there are some general rules, which we learned back in English class. With a navbar you’re presenting a set of discrete options and fir clarity’s sake they should be clearly laid out in the text as such. If you were presenting that in (say) an instructional brochure, you might choose to use something like a bulleted list.
    “When using Phonebank, you can choose from one of the following options at the main menu:
    - Press 1 to hear your account balances.
    - Press 2 to transfer funds between your accounts.
    - Press 3 to make a bill payment using Bpay.
    - Press 4 to request a statement.
    - Press hash (#) at any time to speak to an operator.”
    The context of the Web is different: it’s not a printed page and many of the rules don’t apply. And over the years, we’ve become used to seeing a set of options listed down the side of the page, or perhaps at the top or bottom of a page, in a row, like so:
    Balances | Funds transfer | Bpay Bill Payments | Statements | Help
    But that doesn’t change the nature of the text. The above is still a list of options.

  44. travis says:

    D. is short for unordered list, so this seems pretty obvious.

  45. huphtur says:

    E. Milky Way!

  46. p@chud.ca says:

    i find it more interesting that people never run out of stuff to say about what’s semantically correct/incorrect, than what the answer is. but that’s the point right? ;)

  47. TOOLman, besides avoiding the “skip navigation” link, what do you hope to accomplish by putting the nav links after the main content? I would think that you’d be better off having the navigation at the top. Imagine you’re viewing your site without style sheets. Would you rather scroll through the navigation to get to the content on each page, or scroll through the content to get to the navigation?

  48. Keith Bell says:

    The question is about semantics, but in excercises such as this, it seems impossible not to consider also markup validity. So:
    Option A – While some may think line breaks are merely presentational, they are not: they may lend some purposeful separation. However they do not specifically characterise each line as being an item in a list, so A cannot be the answer to the question.
    Option B – This is getting closer to semantic “correctness”, because the <li> tags identify each item as a list item, and in HTML, the closing tag is not necessary. However HTML and XHTML require LI elements to be contained within UL or OL elements, so the markup is not valid and does not indicate that the list items are part of an unordered list, as requested. B cannot be the best answer to the question.
    Option C – Similar to B. The items have closing tags as required by XHTML, but are still not contained within a UL or OL element, resulting in invalid markup. C cannot be the best answer to the question.
    Option D – Here each item is tagged as a list item and all are contained within a UL element, providing semantic clarity that each is part of an unordered list. The <ul> and </ul> tags make the markup valid; the closing tags on the LI elements make them valid for HTML or XHTML. D is the best answer to the question.

  49. Brian says:

    D is correct, of course, but I admittedly prefer A. I don’t like it when browsers apply their own default styles to my pages. :/ I also wrap paragraphs in <div class=”par”>. It validates, but it might as well not.
    Utterly unprofessional, I know, but I’m not really a professional.
    I feel so …impure…

  50. MikePond says:

    Isn’t it true that XHTML 2 removes the <br/> tag, but provides a <line></line> tag, so that you would mark up a poem with the ‘line’ elements nested within ‘paragraph’ elements? That seems like the most semantically correct way to do things like poems. Too bad we don’t already have it.

  51. Raena says:

    Brian: the CSS to have the browser render a real list is easy peasy. Check it out.

  52. Jeremy says:

    D is the correct answer. the others are invalid markup, or can lead to confusing code.

  53. Niket says:

    The more appropriate question is when should a list be used and when should it not. There is no denying that D is the correct answer here. But when in the use of list appropriate and when is it not?
    In general, (X)HTML is not a semantic language as of now. Forcing a structure, more than what is necessary, is going to make (X)HTML use more and more cumbersome. Flexibility was the cornerstone of HTML’s success. While we try to push standard-compliant and accessible design, we should shed our dogma.
    A list is defined as a series of related items. A list is always itemized. So while:
    “Some of my friends who showed up at the party include Tom, Dick, Harry, John and Jim.”
    contains a series of related items, its a list. However, semantically speaking, it not. For example, you wont use \begin{itemize} in TeX; nor would you use list in any of the typsetting, editing or DTP software.
    I believe my point is that SEMANTICS is related to both STRUCTURAL as well as VISUAL display.

  54. SFT says:

    I was about to say the same as MikePond. There are two types of content I’ve come up with where <br /> is appropriate: poetry/lyrics and mailing addresses. In both these cases, <l> </l> makes better semantic sense than <br /> because you’re marking up the stuff rather than empty space. Also would give you more styling flexibility.
    Does there exist a proper use for <br /> where <l></l> wouldn’t be better? I.e., where the linebreak —- NOT the line —- is the structural unit?

  55. SFT says:

    Wow. I followed what I thought was a recent link to this question. Guess I ought to check the homepage next time..

  56. jrtman says:

    “A” is aweful, “B” is almost as awful, “C” is almost correct but “D” is the correct answer as it is more complete.

  57. Asylum says:

    “A” could be correct if it’s an odd poem :D

  58. Poems and lyrics are not lists, rather they are texts that require formatting to be read/sung as the author intended. Therefore, they have no relevance when discussing how a list should be coded.