¶ 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.
Comments
1
I agree with you that Tantek’s model seems to over complicate things. Nested lists look good on his minimalist site but I’m not ready to write off DIVs just yet.
I used to use lists for the top navigation but as Bowman points out, it’s not great on old visual browsers like NS4. I’ve got a mate who regularly views my site in NS4 on a unix platform. He got irritated because every page on my site had a vertical menu at the top of the page taking up at least half the page. So, I went back to the whole:
Home | item | item | item
thing. Obviously I could achieve this using ul/li tags and css but it just takes up too much of the page on non standard browsers. I agree that putting too much emphasis on these sorts of navigation bits and bobs does affect the perception of the importance of these links.
I think the whole semantics issue is very complicated and only XML can really give proper semantics to a document. If we are using XSLT to pump out XHTML, then I feel that named DIVs seem to work best in terms of grouping stuff.
I don’t really know too much so take this with a pinch of salt. Look forward to being educated on the matter.
2
Well I agree mostly with your points. However, in a lot of places, <li>sts can be overkill. I only use them for my navigation, top and bottom, and for my links section (which should probably be a <dl>).
I am not sure wheter I like or dislike the use of lists and such for the main content or frontpage of a blog. I am quite happy to use the format:
<h?>some heading</h?>
<p>some text</p>
<p>some more text</p>
<p>comments (*)</p>
But then again it is a matter of personal taste and interpretation of semantic meaning.
Anyway, it seems like good material with which to start lengthy discussions and such on…
3
Having seen the palm screen shots, I’m impressed at how good Dive Into Mark looks. That all important ‘skip to content’ link helps no end. Zeldman’s site is a bit of a mess with all those images at the top and Tantek’s looks overly complicated. Stop design works well, but no skip nav.
All I’d like to know now is – how annoying does the repeated list of nav items get after you’ve been to a few pages on the site. I guess the ‘skip nav’ link helps the process but I’m not sure.
I’m not entirely convinced yet, but will continue to bear it in mind.
4
I’ve been using stylized lists ever since I was alerted to the “A List Apart” article, because it just makes plain sense.
Semantically they are a list of things. Period. End of story. In terms of accesibility, this is an absolute must.
The idea that “we tend to think of [vertical list of links at the top of a page] as “Contents” links which anchor to a point further down on a long page” and that “we’ve come to expect site-wide navigation across the top of the page is horizontal in nature, not vertical” is ridiculous.
Homepages for CNN, the New York Times, Microsoft and so many other sites directly contradict this assertion.
When it comes to recognizing nav bars, presentation is the key. Users know what a nav bar should look like.
On PDAs, text-readers and old browsers, where presentational markup isn’t possible, you get a list. If you put the apporpriate title on top of the list (might I suggest “Site Navigation”), users have no problem understanding what is what.
I don’t know, maybe I’m missing something?
5
Well you can’t really argue with the PDA/screen reader issue cos the evidence is there – it is much better. I’ll eat my hat now and sort out my site tonight.
Now, what about the “Address” tags. Where once we used <br /> do we now use <ul><li>Address line 1</li><li>Address line 2</li></ul> etc?
Incidentally, my Unix NS4 using mate just told me he’s now using NS7!
Hmm..
6
I agree. In the English language, “lists” are spoken as comma delimited arrays, and there is no semantic need for vertical arrangement.
“I’s like three pears, a pound of apples, two cabbages and a turnip”
In the above sentence, a list of greengroceries is ordered horizontally. It is still a list just as much as the following.
“I require the following fruit and veg:
1. Three pears
2. A pound of apples
3. Two cabbages
4. A turnip”
The difference between these is not important. It is the similarity, that of both being semantic lists, that dictates the markup best used.
The use of lists for navigation assists non-visual brower accessibilty. They don’t give a turnip whether the “list” is shown horizontally or vertically on Mozilla 1.1/WinNT. Neither do non css browers. The semantic value of using list markup for “lists” of links in navigation far outweighs any confusion some people may have over the differences in “look” between the markup and the CSS-styled design. There is indeed “no conflict here”.
Thanks.
7
So, how would you write the following sentence without changing it?
I like apples, oranges, pears and cherries.
You can’t do this:
<p>I like
<ul>
<li>apples</li>
<li>oranges</li>
<li>pears</li>
and
<li>cherries</li>
</ul>
.</p>
So, you have to change the language. This is not always a good thing, especially when writing prose…
“Ben got up, went shopping, had lunch and then returned home for his tea.”
becomes:
Ben
got up
went shopping
had lunch
returned home for tea
You have to remove the ‘joining bits’: comma, ‘and’ etc. It just doesn’t read as well.
Should we change our way of writing so it suits the semantic web?
Of course, we’re talking nav lists and nav lists, being the way they are can be marked up in this way. I’m just not so sure about inline lists within paragraphs.
Please enlighten me!
8
ul.sentancize { display: inline; }
ul.sentancize li:before { content: “, “; }
ul.sentancize li.first:before { content: “”; }
ul.sentancize li.last:before { content: ” and “; }
I like <ul class=”sentancize”><li class=”first”>apples</li><li>oranges</li><li>pears</li><li class=”last”>cherries</li></ul>.
That is, of course if browsers actually complied with all of the standards…
9
Jay,
Yes, that would be a great idea. I like your thinking!
The only thing that concerns me, and I may be mistaken here, is that text-only browsers will not display the commas and the word ‘and’. In effect, these things are removed from the content and added to the style. In text, commas and words are content not style, surely?
10
While the technique illustrated by Jay may work, and is a great experiment in what CSS can do for lists, I don’t think one would ever apply this in the real world.
After all, a sentence like ‘I like apples, oranges, pears and cherries’ makes perfect sense without being marked up with a list in the middle. And the spec does not allow <ul>s inside <p>s.
Having said that, I’m sure someone will come up with a really sensible use for this technique and all the theory will be justified :-)
11
Rich and Guy, I agree with you both.
It’s a neat example with absolutely no application in the real world. If the said list is within the confines of a paragraph, it is simply text and words and grammar (which dictates such conventions as commas and such).
We should definitely not try to apply HTML lists to things when they better fit something else.
Navigation bars, however, are lists of places you can go with no surrounding context and hence should be marked up that way.
12
I think we’re all in agreement. For all the projects I’ve been doing lately at work I have marked up navs using <ul><li></li></ul>. My own personal site is yet to use them in the nav due to my CMS being bust! So there’s a lot of find and replacing to be done across the pages.
I will make the change and henceforth spread the word here at The Open University that it should be made best practice.
This has a useful and enlightening topic. Cheers.
13
Nice site!
Add your comment
Comments are now closed on this post. If you have more to say please contact me directly.