title: HTML5 multi nav tag best practices
body: <p>I am trying to write a theme with multi menu at the header, should i use multi <code>nav</code> tag for each of them? Or wrap them all inside a <code>nav</code> tag?</p>
  
  <p>Here is the example <a href="http://codepen.io/anon/pen/JGEaNm" rel="nofollow">codepen</a>.</p>
  
  <p><code>header-a</code> wrap everything inside <code>nav</code> tag.</p>
  
  <p><code>header-b</code> wrap menu and the element that between menu inside <code>nav</code>.</p>
  
  <p><code>header-c</code> wrap menu inside <code>nav</code> by each.</p>
  
  <p><code>header-d</code> add <code>nav</code> tag inside each <code>bar</code> to wrap everything inside <code>bar</code>.</p>
  
  <p>Which method will be good in this case?</p>
  
  <p>Thank you so much.</p>