title: HTML5 Structure - <article>, <section> and <div> usage
body: <p>Good Day,</p>
  
  <p>I just started to learn HTML5 - have no issues, everything's going perfectly.</p>
  
  <p>I have only one, small question about semantic usage of <code>&lt;article&gt;</code>, <code>&lt;section&gt;</code> and <code>&lt;div&gt;</code> tags.</p>
  
  <p>I know that <code>&lt;div&gt;</code> element has no semantic meaning - in HTML5 it should be used mainly for scripting/styling purposes. Here everything is clear for me. I found a lot of useful informations in SO question: <a href="https://stackoverflow.com/questions/4781077/html5-best-practices-section-header-aside-article-tags">HTML5 has new tags article, section and aside. When should I use div tag?</a>.</p>
  
  <p>However, I have some issues with <code>&lt;article&gt;</code> and <code>&lt;section&gt;</code> usage. W3C HTML5 specification says that <code>&lt;article&gt;</code> tag</p>
  
  <blockquote>
    <p>Specifies independent, self-contained content, could be a news-article, blog post, forum post, or other articles which can be distributed independently from the rest of the site. </p>
  </blockquote>
  
  <p>where <code>&lt;section&gt;</code> tag should be used</p>
  
  <blockquote>
    <p>For a section in a document. Such as chapters, headers, footers, or any other sections of the document.</p>
  </blockquote>
  
  <p>In theory, everything's clear. However, while preparing the code for my first HTML5 website I found it a bit hard to differ.</p>
  
  <p>Let me explain my website structure:  </p>
  
  <ol>
  <li>Backgrounds are added to the body element. Working perfectly.</li>
  <li>I use <a href="http://960.gs/" rel="noreferrer">960.gs</a> grid system in my every HTML/CSS project. This time I'm using it too. As you surely know, it requires a container to be added (with a class: container_12 in my case).</li>
  </ol>
  
  <p>To conclude explanation of my structure:</p>
  
  <ol>
  <li>As a main container, I've used <code>&lt;div class="container_12"&gt;</code></li>
  <li>The first element in my document is a <code>&lt;header&gt;</code>. It contains few elements: slider and top bar. The top bar is a <code>&lt;section&gt;</code>. It has two child elements: telephone number on the left and language list on the right. For those elements, I have used <code>&lt;section&gt;</code> too. For a slider (or a short slogan placeholder on inner pages) I've used <code>&lt;section&gt;</code> tag which contains two <code>&lt;section&gt;</code> tags: left and right column.</li>
  <li>As a main content wrapper for homepage I've decided to use <code>&lt;section&gt;</code> element. For inner pages I'm using <code>&lt;article&gt;</code> for pages like About Us, etc. For blogs list, I'm using a <code>&lt;section&gt;</code> with a list of <code>&lt;article&gt;</code> tags inside. For a single post, I'm using <code>&lt;article&gt;</code> element.</li>
  <li>Obviously, for a footer, I'm using <code>&lt;footer&gt;</code> element with three <code>&lt;section&gt;</code> elements as a column wrappers.</li>
  </ol>
  
  <p>My layout before convertion to HTML5:</p>
  
  <pre><code>&lt;div class="container_12"&gt;
      &lt;div class="grid_12 header"&gt;
          &lt;div class="bar grid_12 alpha omega"&gt;
              &lt;div class="grid_6 alpha"&gt;
                  Phone number
              &lt;/div&gt;
              &lt;div class="grid_6 omega"&gt;
                  German - English - French
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="grid_6 alpha"&gt;
              LOGOTYPE
          &lt;/div&gt;
          &lt;div class="grid_6 omega"&gt;
              &lt;ul&gt;
                  navigation
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="grid_12 alpha omega"&gt;
              &lt;div class="grid_6 alpha"&gt;
                  Slider I col
              &lt;/div&gt;
              &lt;div class="grid_6 omega"&gt;
                  Slider II col
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="grid_12 content"&gt;
  
      &lt;/div&gt;
      &lt;div class="grid_12 footer"&gt;
          &lt;div class="grid_4 alpha"&gt;
              Footer I col
          &lt;/div&gt;
          &lt;div class="grid_4"&gt;
              Footer II col
          &lt;/div&gt;
          &lt;div class="grid_4 omega"&gt;
              Footer III col
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my code after converting it to HTML5:</p>
  
  <pre><code>&lt;div class="container_12"&gt;
      &lt;header class="grid_12"&gt;
          &lt;section class="bar grid_12 alpha omega"&gt;
              &lt;section class="grid_6 alpha"&gt;
                  Phone number
              &lt;/section&gt;
              &lt;section class="grid_6 omega"&gt;
                  German - English - French
              &lt;/section&gt;
          &lt;/section&gt;
          &lt;section class="grid_6 alpha"&gt;
              LOGOTYPE
          &lt;/section&gt;
          &lt;nav class="grid_6 omega"&gt;
              &lt;ul&gt;
                  navigation
              &lt;/ul&gt;
          &lt;/nav&gt;
          &lt;section class="grid_12 alpha omega"&gt;
              &lt;section class="grid_6 alpha"&gt;
                  Slider I col
              &lt;/section&gt;
              &lt;section class="grid_6 omega"&gt;
                  Slider II col
              &lt;/section&gt;
          &lt;/section&gt;
      &lt;/header&gt;
  
      &lt;section class="grid_12 content"&gt;
  
      &lt;/section&gt;
      &lt;footer class="grid_12"&gt;
          &lt;section class="grid_4 alpha"&gt;
              Footer I col
          &lt;/section&gt;
          &lt;section class="grid_4"&gt;
              Footer II col
          &lt;/section&gt;
          &lt;section class="grid_4 omega"&gt;
              Footer III col
          &lt;/section&gt;
      &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is my approach correct? Could you add or correct something?</p>
  
  <p>To avoid any questions: I know that <code>&lt;section&gt;</code> is not a replacement for a <code>&lt;div&gt;</code>.</p>