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:
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,
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.