Html <nav> vs <ul> for nav bars


Which better conforms to the new HTML5 standard to use for a navigation bar on a web page, the new HTML5 nav tag or using the ul tag with css?

I would think the latter because more browsers are able to use HTML 4.01 than HTML 5, although in recent years that gap may have closed a bit.

 <!--HTML5 Way -->
 <!DOCTYPE html>
         <a href="/html/">HTML</a> |
         <a href="/css/">CSS</a> |
         <a href="/js/">JavaScript</a> |
         <a href="/jquery/">jQuery</a>


 /*CSS way*/
 #topmenudiv ul{
    margin: 0;

 #topmenudiv li{
    border-right: 1px solid #990000;
    height: 100%;
    padding:10px 20px 12px 20px;
    float: left;

        <div id="topmenudiv">

Can anyone give a definitive answer on this? Through your experiences which would be better to use for a website?


Honestly both work just as well. As of now, nobody has really implemented anything in any web browser that takes advantage of the new semantic tags in HTML5, and a lot of the tags are both vague and ambiguous and a lot of people are unsure of how to use them. The spec doesn’t really clear much up. Tags like <article> and <section> can be used in a lot of different ways (should I put sections within divs for visual purposes? should the <h#> tag for the heading of a particular section go inside it or just above it? why do some websites show articles alongside sections in diagrams but state that the article is the primary content of a website?)

For now, I’m doing my best to simply replace <div>s with more logical semantic tags wherever it makes sense. In your case, I would keep using a <ul> for your links and put the list inside a <nav> tag instead of inside a <div> tag.

It’s important to keep in mind that in practice, all the HTML5 semantic tags behave exactly the same as and are meant to replace the standard meaningless <div>. Non HTML5 browsers will treat <nav> and other new elements like <div>s.

Example for you (taken directly from the Mozilla Developer Network page for the nav element):

        <li>item 1</li>
        <li>item 2</li>

Further reading:

I highly recommend reading through all three articles, but the third link is, in my opinion, a must read. It does a great job of pointing out all the problems I discussed above and will perhaps clarify things for you (or at least point out the lack of clarity). The fourth link specifically outlines how to use the element.

Answered By – Chuck Dries

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published