View Full Version : Is there any actual benefit whatsoever to using a list for navigation?

Jan 27, 2010, 03:39 PM
I keep reading that it's insane not to put your website navigation in a list, and anybody who doesn't do it should die and burn in hell. But I haven't been able to find any logical reason at all to do it.

The only reason I've found is that "well, a navigation bar is like, in a way, like, it could be considered a list of links, so, you know, you should, like, use a list OTHERWISE YOU AND YOUR WEBSITE ARE INSANE AND TERRIBLE BECAUSE OF SEMANTICS AND STUFFASDFASDF http://img27.imageshack.us/img27/6485/emotsmugt.gif" But that's obviously not logical.

Can somebody explain this to me?

Jan 27, 2010, 04:43 PM
One of the big reasons is accessibility, especially for screen readers. When people use,
<a href="link1.html">link 1</a> |
<a href="link2.html">link 2</a> |
<a href="link3.html">link 3</a> |
<a href="link4.html">link 4</a>
it gets read as,
link 1 vertical bar link 2 vertical bar link 3 vertical bar link 4
which needless to say, is annoying. If they don't use a spacer character then it gets read with no pauses and the user has no idea where one link ends and the next begins. Links in a list have noticeable pauses in between them.

Another reason is simply for semantic markup, which can lead to better SEO. I also find using a list makes it easier to use CSS on. I can modify just the CSS and change between a vertical navigation bar and a horizontal one. Sure, you can use enough HTML markup to do this without list markup, but a list just makes sense.

Personally I don't care if people use a list for navigation, it doesn't fit all situations, but the navigation better be easy to use, not require JavaScript, and hopefully is accessible to screen readers.

Jan 27, 2010, 04:46 PM
Hmm, never heard that if you don't you will burn... but yeah, it is a good idea for accessibility because people with screen readers, or using a browser with CSS turned off, it will "make sense" that it is a menu.

What is really cool, too, is that well-designed drop-down menus can use lists and sub-lists and then it is even more logical for someone using it without the actual visual elements there.


Have fun!

Jan 29, 2010, 09:02 AM
You basically answered your own question when you mentioned "a list of links". If you didn't write the html as a list, what would you use?

A table? Well it isn't tabular data so that doesn't make sense.
A set of paragraphs in a div? Not really.

I'm sure you could come up with other potential ways of doing it, but ultimately a navigation block (or bar) is just a list of links so why not code it up as such?

As others have said, you then use CSS to get it to look as you want.

Feb 3, 2010, 01:42 PM
SEO, Mobile Devices, CSS. It's fairly common and very easy to manipulate. Especially for nesting lists or drop downs.