Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Should I be using nav or ul

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?

like image 370
qwertymk Avatar asked Mar 07 '12 11:03

qwertymk


People also ask

When should I use NAV?

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.

Should I use ul li in HTML?

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.

Why is NAV better than Div?

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.

What does Nav ul mean?

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


1 Answers

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>
  1. Read about Html 5

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.

like image 150
Jack Avatar answered Oct 21 '22 19:10

Jack