Menu
I'm making a navigation menu, should I be using the <nav> element or <ul> element for that?
If I use a nav I'll prob need to use a shiv so that it works across browsers.
If that's so, what the advantage of using a nav over a ul?
EDIT:
I know you can put a ul into a nav my question is why use a nav at all?
370
Using nav in HTML You should only use the <nav> tag for the dominant block of navigational links, not all the links within a website. It is a great option when you need to include an unordered or ordered list of links. However, if you want to add links to the <footer> element, you don't need to include <nav> tags.
The HTML Standard includes an example that use <nav> followed by <ul> and <li> . A nav element doesn't have to contain a list, it can contain other kinds of content as well. Based on the Standard, the use of ul and li is personal preference as long as you have nav to indicate navigation.
The only difference is to the human reader of the HTML. Using a nav tag that encloses navigation elements is the same as using a div tag to enclose navigation elements and adding an HTML comment that informs the human reader of the HTML that the div tag contains only navigation elements.
"ul" is the unordered list. The ". nav "part is referring to the name of a class, and the last part "li" refers to the list items of that list. In summary, the statement ul. nav li is targeting all the list items inside the unordered list that has the .
Don't get confuses with <nav> and <ul>. They both can be used together for a navigation menu.
Nav is an HTML5 tag. If you are creating something in HTML5 you can use <nav> as there is no restriction, but not all browser will render this correctly.
<nav>
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</nav>
Ul creates an unordered list. Unordered means the items in the list will not be in any particular order. You can nest an ul element inside nav to place your links.
Read more about the HTML tags and how they work here.
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
This will create a navigation bar you have to put some CSS styles to look it better.
The above both code will produce the same result. The only difference is that nav tells the browser that this element is for navigation purpose s.
150
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
