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>

Answer 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 ul s and li s, you don't clog up your code with WAY too many IDs.

Answer 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.

Answer 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