title: In HTML5, should the main navigation be inside or outside the <header> element?
body: <p>In HTML5, I know that <code>&lt;nav&gt;</code> can be used either inside or outside the page's masthead  <code>&lt;header&gt;</code> element. For websites having both secondary and main navigation, it seems common to include the secondary navigation as a <code>&lt;nav&gt;</code> element inside the masthead <code>&lt;header&gt;</code> element with the main navigation as a <code>&lt;nav&gt;</code> element outside the masthead <code>&lt;header&gt;</code> element.  However, if the website lacks secondary navigation, it appears common to include the main navigation in a <code>&lt;nav&gt;</code> element within the masthead <code>&lt;header&gt;</code> element.</p>
  
  <p>If I follow these examples, my content structure will be based on the inclusion or exclusion of secondary navigation. This introduces a coupling between the content and the style that feels unnecessary and unnatural.</p>
  
  <p>Is there a better way so that I'm not moving the main navigation from inside to outside the masthead <code>&lt;header&gt;</code> element based on the inclusion or exclusion of secondary navigation?</p>
  
  <h2>Main and Secondary Navigation Example</h2>
  
  <pre><code>&lt;header&gt;
      &lt;nav&gt;
          &lt;!-- Secondary Navigation inside &lt;header&gt; --&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;h1&gt;Website Title&lt;/h1&gt;
  &lt;/header&gt;
  &lt;nav&gt;
      &lt;!-- Main Navigation outside &lt;header&gt; --&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><a href="http://onlinedegrees.org">OnlineDegrees.org</a> is an example site that follows the above pattern.</p>
  
  <p><img src="https://i.stack.imgur.com/jolBc.png" alt="enter image description here"></p>
  
  <h2>Main Only Navigation Example</h2>
  
  <pre><code>&lt;header&gt;
      &lt;h1&gt;Website Title&lt;/h1&gt;
      &lt;nav&gt;
          &lt;!-- Main Navigation inside &lt;header&gt; --&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p><a href="http://keyzo.co.uk/">Keyzo.co.uk</a> is an example site that follows the above pattern.</p>
  
  <p><img src="https://i.stack.imgur.com/0JD0t.png" alt="enter image description here"></p>
  
  <h2>Excerpts from <em>Introducing HTML5</em> — Added on 02-Feb-11, 7:38 AM</h2>
  
  <p><a href="http://amzn.com/0321687299"><em>Introducing HTML5</em></a> by Bruce Lawson and Remy Sharp has this to say about the subject:</p>
  
  <blockquote>
    <p>The header can also contain navigation. This can be very useful for site-wide navigation, especially on template-driven sites where the whole of the <code>&lt;header&gt;</code> element could come from a template file.</p>
    
    <p>Of course, it's not required that the <code>&lt;nav&gt;</code> be in the <code>&lt;header&gt;</code>.</p>
    
    <p>If depends largely on whether you believe the site-wide navigation belongs in the site-wide header and also pragmatic considerations about ease of styling.</p>
  </blockquote>
  
  <p>Based on that last sentence, it appears that Bruce Lawson—author of the chapter those excerpts are from—admits that "pragmatic considerations about ease of styling" yield a coupling between the content and the style.</p>