html5 NAV TAG proper usage

Question

I've begun to use html tags on my pages, and I'm trying to determine what is the proper usage of the NAV tag. I've read the documentation, and it seems like I should be okay with what I have, but I noticed that most other developers have their navigation 'blocks' within "ul" "li" tags. I've using divs.

My question is, what are the pros / cons to using "ul" "li" tags rather than divs?

And would the following work with nav?

<nav>
    <div id="navBar">
        <div id="navItem1"><a></a></div>
        <div id="navItem2"><a></a></div>
        <div id="navItem3"><a></a></div>
        <div id="navItem4"><a></a></div>
    </div>
</nav>

Solution 1

The code you posted isn't a best practice. It should be:

<nav>
    <ul>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
    </ul>
</nav>

<ul> and <li> tags are better than using div tags, and are almost always used for menus. By using uls and lis, you don't clog up your code with WAY too many IDs.

Solution 2

Lists (ul, ol) can have additional meaning in accessible browsers (screen readers and the like) while divs do not. This makes it easier for these users to use your site and one of the reasons lists are preferred for menus.

Also, as others said, list tags give the content some context (menus are lists of links) while divs have no context.

Solution 3

by custom, a navigation bar is considered a list of links, hence the ul-li. there is no actual difference, just a common practice

what you are doing is fine, altought maybe i'd replace the div#navBar directly with a nav#navBar, to reduce an anidation level

Comments

[Saahir Foux]

Thanks for your help. Its very likely I'll convert my divs to ul/li. I worry about ie7 support for the nav tag though.

[ayyp]

Then you'll want to use a shiv like this: <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script‌​> <![endif]-->

[Saahir Foux]

Thanks everyone, you've been most helpful. =)

[Camilo Martin]

-1. There is an actual difference, people who use screen readers rely on lists to navigate a page, automated tools might use them to build structure, search engines may use them for various reasons when indexing a page, etc.