Question

Firstly, very sorry if this is not a “true” stackoverflow question. But it’s something I’ve always wondered about…

When you code a navigation bar for a site (html) I’ve read that it is very good practice, if not the ONLY practice to implement it using the list tag. e.g.

<ul>
    <li> Home </li>
    <li>About Us</li>
    <li>Blog</li>
    <li>Contact Us</li>
</ul>

And then apply the necessary styling that displays the list horizontally and so on and so forth.

But is this standard set in stone or does one only do it this way if it’s the best option to do so… Because currently I have a navigation bar to do that is not your ‘standard’ nv bar so to speak, and it’s a little bit of a mission to implement it as a list. A few link tags placed in some divs will work nicely. But of course I do not want to do this that method if it’s going to make people point and laugh at me…

Thanks in advance!

Answer 1

Why use lists for site navigation?

Part of designing a site using web standards involves the use of semantically correct code. To quote “Brainstorms and Raves“:

Good HTML structure is based on logic, order, and using semantically correct markup. If you have a heading use the heading element, beginning with the H1 element. If you have a paragraph, use a paragraph element. If you have a list, use a list item element.

At a structural level, site navigation is simply a list of links to other areas of the site. Therefore, the best method for marking up site navigation is (arguably) to use a list element.

If you use good HTML structure, then text-based browsers, screen readers, non-CSS supporting browser, browsers with CSS turned off and search bots will be able to access your content more easily.

A nice article on this is here