title: Should HTML 5 semantic markup be used for styling at all?
body: <p>I must admit the HTML5 semantic markup confuses me. I'm talking about these tags in particular:</p>
  
  <pre><code>&lt;header&gt;
  &lt;nav&gt;
  &lt;section&gt;
  &lt;article&gt;
  &lt;aside&gt;
  &lt;footer&gt;
  </code></pre>
  
  <p>Using semantic elements provides the UA with information it couldn't normally get from a <code>&lt;div&gt;</code>, but should they be used <em>along with</em> <code>&lt;div&gt;</code> tags or can/should you style the semantic markup directly? </p>
  
  <p>In other words, what is the proper approach? </p>
  
  <p>This:</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;section&gt;
          &lt;h1&gt;Lorem ipsum&gt;&lt;/h1&gt;
          &lt;p&gt;Text&lt;/p&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Or this:</p>
  
  <pre><code>&lt;section id="content"&gt;
      &lt;h1&gt;Lorem ipsum&gt;&lt;/h1&gt;
      &lt;p&gt;Text&lt;/p&gt;
  &lt;/section&gt;
  </code></pre>