Is there any actual benefit whatsoever to using a list for navigation?

Discussion in 'Web Design and Development' started by That-Is-Bull, Jan 27, 2010.

  1. macrumors 6502


    Sep 29, 2007
    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 [​IMG]" But that's obviously not logical.

    Can somebody explain this to me?
  2. Moderator emeritus


    Aug 16, 2005
    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,
    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.
  3. macrumors 6502

    Sep 24, 2009
    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!
  4. macrumors regular

    Mar 27, 2009
    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.
  5. macrumors 65816


    Aug 16, 2004
    SEO, Mobile Devices, CSS. It's fairly common and very easy to manipulate. Especially for nesting lists or drop downs.

Share This Page