title: Should a <nav> tag be outside the <main> tag?
body: <p>My question is specifically about semantic HTML5.</p>
  
  <p>In a case where the primary navigation is not part of the header by design, but is still site-wide, should it then be nested within the <code>&lt;main&gt;</code> tag?</p>
  
  <p>The W3C specification states about the <code>&lt;main&gt;</code> tag:</p>
  
  <blockquote>
    <p>"The main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application."</p>
  </blockquote>
  
  <p><br/></p>
  
  <p>To me, this would indicate that I should place the <code>&lt;nav&gt;</code> outside <code>&lt;main&gt;</code> like so:</p>
  
  <pre><code>&lt;body&gt;
  
    &lt;header&gt;
      [...]
    &lt;/header&gt;
  
    &lt;nav&gt;
      [...]
    &lt;/nav&gt;
  
    &lt;main&gt;
      [...]
    &lt;/main&gt;
  
    &lt;footer&gt;
      [...]
    &lt;/footer&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p><br/></p>
  
  <p>I also get the notion that the <code>&lt;main&gt;</code> tag can be used on level with <code>&lt;header&gt;</code> and <code>&lt;footer&gt;</code> and effectively include everything between those two tags:</p>
  
  <pre><code>&lt;body&gt;
  
    &lt;header&gt;
      [...]
    &lt;/header&gt;
  
    &lt;main&gt;
      &lt;nav&gt;
        [...]
      &lt;/nav&gt;
      [...]
    &lt;/main&gt;
  
    &lt;footer&gt;
      [...]
    &lt;/footer&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p><br/></p>
  
  <p>Which one is more semantically correct? Does it matter?</p>
  
  <p>All of the most reliable sources on the <code>&lt;main&gt;</code> tag conveniently avoid the issue in their examples by either nesting the primary navigation in the header or making the navigation directly related to the content.</p>
  
  <p>I guess this might bring up how much design should dictate semantic markup?</p>
  
  <p>I'm also interested in whether a sidebar <code>&lt;aside&gt;</code> that is repeated across a website, and is not directly related to the topic of the page, should be nested in the <code>&lt;main&gt;</code> tag, but I image that would be covered by answers to my main question.</p>