Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

seo

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)

like image 817
Voriki Avatar asked Mar 06 '12 12:03

Voriki


People also ask

Can I have 2 NAV elements?

Yes, absolutely. You can have multiple header , nav , and footer tags sans penalty.

Can you have a NAV inside a NAV?

It's perfectly acceptable to use nav there. You may also want to look at aside if it can be removed, or look to use section tags within the nav to better divide up the content.

Can you put Nav inside header in HTML?

It's completely up to you. You can either put them in the header or not, as long as the elements within them are internal navigation elements only (i.e. don't link to external sites such as a twitter or facebook account) then it's fine.

Can header go NAV?

We can also include our navigation bar in the header as it is also an important part of the web page that defines the structure of our content and navigate through the different sections of the page. Hence it can also be placed inside the header tag.


1 Answers

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

like image 112
Dirk Avatar answered Nov 15 '22 12:11

Dirk