Am I correct to not use a <nav> tag for my secondary navigation?

1 Views

I’m building up a WordPress HTML5 template, and I’m wondering if my structure for the header navigation is correct.

enter image description here

Read More

So as you can see on the screenshot, I have one “main” menu (musique/arts/design…), and another “secondary” menu on the upper right (a propos/publicité…). My concern is about that last one. This is the HTML I’ve chosen: 

<div class="header-nav grid_6">
  <ul id="menu-top-menu" class="clearfix">
    <li id="menu-item-217" class="menu-item menu-item-type-custom menu-item-object-custom first-menu-item menu-item-217"> <a href="http://#">A propos</a> </li>
    <li id="menu-item-218" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-218"> <a href="http://#">Publicité</a> </li>
    <li id="menu-item-219" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-219"> <a href="http://#">Partenaires</a> </li>
    <li id="menu-item-220" class="menu-item menu-item-type-custom menu-item-object-custom last-menu-item menu-item-220"> <a href="http://#">Contact</a> </li>
 </ul> 
</div>

As you can see it’s really basic. I’ve decided to use just a <ul> element and not wrapping it into a <nav>, because in the specs, it says that must be some kind of major navigation, and in my case I’m not sure that it’s the case, as those links aren’t really relevant to the main content that will be found on the site.

Could anyone tell me if I’m wrong ?

Thanks!

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. You’ve got at least one important link in this menu : contact. Therefore I would have use this kind of pattern, with another nav tag :

    <header class="container">

    <div class="grid_6">
        <h1>KORE</h1>
        <p id="baseline">Wordpress HTML 5 responsive boilerplate based on 996css grid</p>
    </div>
    <nav class="grid_6">
        <a href="">À propos</a>
        <a href="">Publicité</a>
        <a href="">Partenaires</a>
        <a href="">Contact</a>
    </nav>

    <div class="clear"></div>

    <nav class="grid_12">
        <a href="">Musique</a>
        <a href="">Art</a>
        <a href="">Design</a>
        <a href="">Lifestyle</a>
        <a href="">Podcasts</a>
        <a href="">Sortir</a>
    </nav>

</header>

  2. You should use the nav tag for the navigation.

    According to the specification

    The nav element represents a section of a document that links to other documents or to parts within the document itself; that is, a section of navigation links.

    So you can use the nav for all kinds of menus/navigational links.
    Also it is a good idea to use the header and footer tags.

    Once you use the nav and header tags you can reduce the number of classes by using these tags directly in your CSS like below.

    header {
    /*style header*/
}
nav {
    /*style navigation*/
}