Forums

nickwalters87

Me and my co-worker argue over the proper use of the < nav > tag. When using the < nav > tag do you put an < ul > inside of it or just a bunch of < a > tags? I typically still use the < ul > inside the < nav > just because it is what I am used to doing and it is still a list of links. What do you guys think?

Senff

Whatever you use for your site navigation (be it <ul>s and <li>s, or just images, or just a number of links) that's what <NAV> is for.

You're not required to put a <ul> list in your <NAV>, but it's a common thing to do nowadays, cause it's (usually) a list of links.

Paulie_D

Also, just because it's a list of links doesn't mean you have to use a nav tag.

In general, and I think this was the spec, the nav tag is to be used to...oh heck, I'll just cut and paste.

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.

aydoubleyou

Both methods are acceptable as far as I know. It does irk me a bit to include a ul tag within the nav though just because it's extra bloat in my markup .

frhetoric

I agree that still putting an

tag keeps it tidy, semantics-wise. However, my pickle is how do I properly call it in the css. I can't seem to find a good practice to id it. Newbie, btw. Be gentle.

frhetoric

your pre tag confuses me.

Vermaas

I always use this approach:


 <nav>
	 <ul>
	 	 <li><a href="#">Link</a></li>
	 </ul>
 </nav>

Just to make sure it will also work in older versions of IE/in IE. Seems to me perfectly semantic.

Paulie_D

@Vermaas That is true if you are using lists but

<nav>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</nav>

is equally valid if you are not.

Vermaas

@Paulie_D And does it also work in IE7-IE9?

Paulie_D

It works in IE9 without any help (I think)

For IE8 and below, you would need to use the HTML5 shiv....but you'd be including that as a matter of course anyway for HTML5 elements.

Paulie_D

<nav>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</nav>

Just remember that the above is NOT an HTML list...it's just a bunch of links grouped together...it won't behave like a 'true' list.

andymaray

@Paulie_D

What about the sub menu(dropdown)? is it possible to create with just nav, a tags

Paulie_D

Nope....although I suppose you could fake it.

Proper Submenus need to be list children of list items

<nav>
   <ul>
     <li><a href="#">Link</a></li>
                 <li><a href="#">Link</a>
                   <ul>
              <li><a href="#">Link</a></li>
                          <li><a href="#">Link</a></li>
                          </ul> 
                  </li>
                  <li><a href="#">Link</a></li>
   </ul>
 </nav>

srig99

@chriscoyier recently wrote an article on this: http://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/.

treehouse : what would you like to learn today?

Forums

nav tag - proper usage