title: Nesting of the HTML5 nav and other semantic elements
body: <p>When using the <code>&lt;nav&gt;</code> element in HTML, how should you handle navigation elements that contain links as well as other content (such as the logo in the example below)?</p>
  
  <p>I find myself containing everything in a <code>&lt;nav</code>> element:</p>
  
  <pre><code>&lt;nav&gt;      
    &lt;div class="logo"&gt;&lt;/div&gt;
    &lt;div class="links"&gt;
      &lt;a href&gt;One&lt;/a&gt;
      &lt;a href&gt;Two&lt;/a&gt;
      &lt;a href&gt;Three&lt;/a&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>But should I only be wrapping the <em>actual</em> navigation elements in a <code>&lt;nav&gt;</code>? (The links in this case)</p>
  
  <pre><code>&lt;div class="nav"&gt;      
    &lt;div class="logo"&gt;&lt;/div&gt;
    &lt;nav&gt;
      &lt;a href&gt;One&lt;/a&gt;
      &lt;a href&gt;Two&lt;/a&gt;
      &lt;a href&gt;Three&lt;/a&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>The same could apply to some of the other tags, such as <code>&lt;time&gt;</code>, if it contained extra data:</p>
  
  <pre><code>&lt;div class="time"&gt;
    Article posted: &lt;time&gt;2016-09-16&lt;/time&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>vs</p>
  
  <pre><code>&lt;time&gt;
    Article posted: &lt;span&gt;2016-09-16&lt;/span&gt;
  &lt;/time&gt;
  </code></pre>
  
  <hr>
  
  <p>I'm not talking about the readability of the code, but about optimizing the markup structure for the benefit of crawlers (SEO) and accessibility.</p>
  
  <p>Edit: The logo is just an example. Frequently there is much more content, I just used the logo as an example for brevity.</p>