PDA

View Full Version : Validity of using lists as navigation



Pennimus
Apr 26th, 2007, 01:25 PM
I was looking around cssplay.co.uk today and came across this (http://www.cssplay.co.uk/menus/definition.html). The menu itself wasn't so much what interested me as this comment:


I know that I have advocated not using list for menus, but that was before I had fully investigated the alternatives. I still disagree with the use of unordered lists but I will concede that definition lists are a better way to go.

I thought that using lists was a standard practice for semantic markup so this piqued my interest. Stu doesn't link to his previous advocacy of not using them so I couldn't find any further info there.

Now, I know there are a lot of people interested in semantic markup here, what are the relative pros and cons of using lists - why might they not be correct? How about definition lists especially... to me, using them for navigation in this way seems even more wrong.

Discuss...

(PS, clearly this guy has mad skills.. I had no idea it was possible to do something like this (http://www.cssplay.co.uk/menus/flyout_horizontal.html) without JavaScript, as I was under the impression ie didn't support any kind of hover functions???)

Arbitrator
Apr 26th, 2007, 02:23 PM
I don’t see any semantic problems with using an unordered list for navigation. It might be better to use a definition list as shown though since you can use the dt element to explicitly associate a group name (i.e., a header) with the dd elements. Even more of a case could be made for nested lists:


<h2>Navigation</h2>
<ul>
<li>
<h3>Pets</h3>
<ul>
<li>Cats</li>
<li>Dogs</li>
<li>Fish</li>
</ul>
</li>
<li>…</li>
</ul>

<dl>
<dt>Navigation</dt>
<dd>
<dl>
<dt>Pets</dt>
<dd>Cats</dd>
<dd>Dogs</dd>
<dd>Fish</dd>
</dl>
</dd>
<dd>…</dd>
</dl>You can see that, in the latter example, there’s a stronger association between “Navigation” and “Pets” and also between “Pets” and “Cats”, “Dogs”, and “Fish”. Of course, you can make explicit associations using unordered lists too:


<div class="section">
<h2>Navigation</h2>
<ul>
<li class="section">
<h3>Pets</h3>
<ul>
<li>Cat</li>
<li>Dog</li>
<li>Fish</li>
</ul>
</li>
<li class="section">…</li>
</ul>
</div>

ronaldb66
Apr 27th, 2007, 09:59 AM
I for one am really interested in why Mr. Nicholls would advocate against using list markup for menus; I see no reason why a list of links shouldn't be marked up as a list.

Arbitrator
Apr 27th, 2007, 01:48 PM
Menu Tutorial (http://www.cssplay.co.uk/menus/tutorial.html) appears to be the advocacy page. He opposes the use of lists for navigation because:


They’re too complicated. With the extra complications, more things can go wrong.
Their use leads to bloated XHTML.
Their use leads to bloated CSS.

Personally, I wouldn’t buy his alternatives: they use invalid code, use improper media types, and propose accessibility through visual appearance instead of semantics. I’d hardly call things like <span><br/></span> a means to accessible content.

Pennimus
Apr 27th, 2007, 02:30 PM
This does seem like a good point:


But why put your LINKS into a LIST only to remove the bullet AND remove the indent?

Until the final solution involves adding <span><br /><span> after every link...

I'd say that the definition lists might be the way forward, though.

Bill Posters
Apr 27th, 2007, 03:24 PM
This does seem like a good point:


But why put your LINKS into a LIST only to remove the bullet AND remove the indent?
It's not a particularly good point (I'd go so far as to say that it's a borderline 'dumb question'), because the answer is (read: should be) common knowledge to those who understand why we separate structure from presentation.

When constructing the markup, including choosing the appropriate elements for the task, forget how it's going to look when you add CSS. The presentation is irrelevant to the underlying semantic structure.
CSS is a bolt-on for a fortunate majority, but the purpose of choosing and using certain elements for certain tasks - and possibly even removing or changing that element's default 'styling' with CSS - is because, when viewed without (or with) CSS, the menu remains a list - which is how it should be marked up - because that's what it is.