Lists, lists & more lists

Doug Bowman is talking about the recent prevalence and possible overuse of heavily styled lists for such elements as site navigation (like my contents drop down) and even overall blog structure.

Doug has an internal battle over the use of lists for horizontal and vertical navigation:

Using a styled unordered list [...] as a means to render site navigation [...] seems acceptable enough if the navigation runs along the left or right side of the interface. After all this fits nicely with the preconceived notion of what a list a is: three or more succinct items, list one item after the other. I start to have trouble with using lists for navigation [that] runs horizontally across the top of the page…

To my mind there is no conflict here. The navigation is being marked up as a list because it is a list. Whether one then styles the navigation horizontally or vertically should not affect the underlying mark-up. After all we could build one style sheet presenting navigation as vertical and another laying it out horizontally; the underlying meaning is still the same.

Doug goes on to think about how these lists would be rendered on a non-style sheet browser:

...the choice of HTML element here can actually affect the perception of what the links are, and thus could also influence behaviour and expectations. [...] When a vertical list of links appears at the top of a page, we tend to think of them as Contents links which anchor to a point further down on a long page. [...] We’ve come to expect site-wide navigation across the top of the page is horizontal in nature, not vertical.

I think he has a point here, but I wonder how much of a problem it really would be, particularly if the global navigation has good, conventional labelling. Consider the following sites as viewed with AvantGo on a Palm Vx:

• Stop Design:
  
• Dive Into Mark:
  
• Zeldman:
  

No confusion there, in my opinion (it certainly never crossed my mind while reading these sites on the train; but then I suppose I am rather familiar with the sites and their markup).

Taking lists one step further, Tantek uses a raft of nested lists, UL inside OL inside OL. He explains that the outer OL is a list of days in the month, the inner OL is a list of posts during that day (each one at a given time) and the UL is a list of separate topics within the post. This makes sense to a degree but seems like overkill to me; check it on a Palm:

In my blog I have taken Tantek’s ideas, but used only a UL to mark up the separate topics within a post. This is partially because I wanted different topics to be demarked by a line break. Wrapping each topic in an LI achieves this in the most meaningful way I could come up with. Some people say that as a matter of semantics, each of my topics should be marked with a subheading, but as a matter of writing I don’t want to do this. I’m not going to adapt my writing just to fit the markup.

Alun David Bestor suggested that, instead of a UL, I could use a DL (definition list) for blog entries. This way I could put my blog title in a DL and each of my topics in a DD, thereby tying them closer together semantically. I already do this with the list of questions/answers on my About page, so I guess it would make a lot of sense for my blog as well. I thought this might be pushing the use of a DL a bit far, but the spec also says

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.

Now that’s certainly beyond the term-description scenario, giving us a good indication that we can be expected to use this markup anytime lists of two or more items are linked together. Such as a the heading-entries structure of a blog.