Grow your CSS skills. Land your dream job.

nav tag – proper usage

  • # May 30, 2012 at 3:49 pm

    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?

    # May 30, 2012 at 3:57 pm

    Whatever you use for your site navigation (be it

      s and

    • s, or just images, or just a number of links) that’s what

      is for.

      You’re not required to put a

        list in your

        , but it’s a common thing to do nowadays, cause it’s (usually) a list of links.

      # May 31, 2012 at 5:14 am

      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.

      # August 5, 2012 at 2:12 am

      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 .

      # August 30, 2012 at 8:01 pm

      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.

        # August 30, 2012 at 8:03 pm

        your pre tag confuses me.

        # August 31, 2012 at 7:19 am

        I always use this approach:



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

        # August 31, 2012 at 7:41 am

        @Vermaas That is true if you are using lists but


        is equally valid if you are not.

        # August 31, 2012 at 7:42 am

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

        # August 31, 2012 at 8:03 am

        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.

        # August 31, 2012 at 8:06 am

        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.

        # February 3, 2013 at 10:08 am

        @Paulie_D

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

        # February 3, 2013 at 10:20 am

        Nope….although I suppose you could fake it.

        Proper Submenus need to be list children of list items

        # February 3, 2013 at 2:41 pm

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

        Viewing 14 posts - 1 through 14 (of 14 total)

        You must be logged in to reply to this topic.

        *May or may not contain any actual "CSS" or "Tricks".