Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

That-Is-Bull

macrumors 6502
Original poster
Sep 29, 2007
404
0
Edmond, Oklahoma
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
emotsmugt.gif
" But that's obviously not logical.

Can somebody explain this to me?
 

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
9
USA
One of the big reasons is accessibility, especially for screen readers. When people use,
HTML:
<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.
 

designguy79

macrumors 6502
Sep 24, 2009
306
2
Michigan
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.

http://articles.sitepoint.com/article/navigation-using-css

Have fun!
 

Dunmail

macrumors regular
Mar 27, 2009
224
4
Skipton, UK
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.
 

ChicoWeb

macrumors 65816
Aug 16, 2004
1,120
0
California
SEO, Mobile Devices, CSS. It's fairly common and very easy to manipulate. Especially for nesting lists or drop downs.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.