Is there a penalty to using two <nav> elements in a <header>

Asked 6/3, 2012 at 12:0 Answered 5/4, 2020 at 8:3

I'm referring to a main menu and a smaller supermenu (don't know the proper term), as seen here:

enter image description here

For something like this, I was going to put two <nav> elements in the <header>. Is there any reason (SEO or otherwise) that this is a bad idea? If so, what would an alternative be?

(this is different from multiple <nav> tags, which referred to multiple on an entire page, not in a single block element)

Sir answered 6/3, 2012 at 12:0 Comment(0)

Short answer: no there is not (probably)

Longer answer: the HTML5 spec itself is a bit fluffy on the subject: http://dev.w3.org/html5/spec/Overview.html#the-nav-element

The thing is that they designate the <nav> element to 'major' navigation blocks, but leave it to the imagination (of both developers and parsers) what that means. As you can see they even provided an example where they exclude the "site-wide" from the navigation block.

<body itemscope itemtype="http://schema.org/Blog">
 <header>
  <h1>Wake up sheeple!</h1>
  <p><a href="news.html">News</a> -
     <a href="blog.html">Blog</a> -
     <a href="forums.html">Forums</a></p>
  <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
  <nav>
   <h1>Navigation</h1>
   <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
   </ul>
  </nav>
 </header>

They seem to do that because they consider limiting the number of links in nav elements a plus for readability (think screen readers etc).

It is probably a bit too early to know what the search engines are going to do, but it seems safe to think that they will attach more importance to nav element links to detect the structure of you site and maybe more so if you have less of them...

My impression: Twitter and Facebook links seem certainly out, support and blog are debatable

Metaphysical answered 6/3, 2012 at 12:55 Comment(0)

I think it does not matter. NAV element just marks functional role of some content. So if you have two separate navigation blocks (regardless of where it's placed: in header or in other parts of page), you are free to use separate NAV elements for them. Some "penalties" from search engines in that case would be pointless.

Knick answered 6/3, 2012 at 12:55 Comment(0)

Nav can be used multiple times on a page in HTML5.

CAN…yes

SHOULD…probably not.

I’ve always worked on the basis that the NAV tag is only for the primary page/site navigations.

If my main (header) navigation area is used for the [nav] then any other menus can be in divs with some role for ARIA.

Teddytedeschi answered 5/4, 2020 at 8:3 Comment(0)

Recommended topics

Hot tags