title: HTML Semantics: div section article, or section div article? Does order matter?
body: <p>I have a certain way of utilizing sections and I want to know the proper use / best practice for semantic SEO reasons. Which is <strong>better</strong>, <strong>why</strong>, and <strong>is there a better way to do this</strong>?</p>
  
  <p>Is it best to use section THEN a div, vice versa, or is it honestly the same?</p>
  
  <pre><code>&lt;section role="title" class="title"&gt;
      &lt;div&gt;
          &lt;article&gt;
              &lt;h1&gt;Page Title&lt;/h1&gt;
          &lt;/article&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>vs:</strong></p>
  
  <pre><code>&lt;div role="title" class="title"&gt;
      &lt;section&gt;
          &lt;article&gt;
              &lt;h1&gt;Page Title&lt;/h1&gt;
          &lt;/article&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I use the Foundation 6 framework and use semantic SASS to handle my rows, columns, etc. </p>
  
  <pre><code>section[role="title"], section.title {
      padding: 100px 0;
      background: black;
      div {
          @include flex-grid-row(); // max-width: 1200px;
          article {
              @include flex-grid-column(12); // width: 100%; or 12 out of 12 columns
              h1 {
                  color: white;
              }
          }
      }
  }
  </code></pre>
  
  <p>Hopefully some of you can see why I am asking this. My typical layout is div, section, article / aside. Looking to see if it matters at all.</p>
  
  <p><a href="http://codepen.io/anon/pen/LNEvpK" rel="nofollow">HERE IS A CODEPEN</a></p>