Html <nav> vs <ul> for nav bars

Issue

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>
 <html>
    <body>
      <nav>
         <a href="/html/">HTML</a> |
         <a href="/css/">CSS</a> |
         <a href="/js/">JavaScript</a> |
         <a href="/jquery/">jQuery</a>
     </nav>

   </body>
 </html>

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

 #topmenudiv li{
    list-style:none;
    font-weight:bold;
    font-size:0.9em;
    border-right: 1px solid #990000;
    height: 100%;
    padding:10px 20px 12px 20px;
    float: left;
 }


 <body>
        <div id="topmenudiv">
            <ul>
                <li>News</li>
                <li>Sports</li>
                <li>Weather</li>
                <li>iPlayer</li>
                <li>TV</li>
                <li>Radio</li>
                <li>More...</li>
            </ul>
        </div>
</body>

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

Solution

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):

<nav>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
    </ul>
</nav>

Further reading:

READ THE THIRD LINK
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