Menu
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?
807
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.
148
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
