HTML Semantics: div section article, or section div article? Does order matter?

Question

I have a certain way of utilizing sections and I want to know the proper use / best practice for semantic SEO reasons. Which is better, why, and is there a better way to do this?

Is it best to use section THEN a div, vice versa, or is it honestly the same?

<section role="title" class="title">
    <div>
        <article>
            <h1>Page Title</h1>
        </article>
    </div>
</section>

vs:

<div role="title" class="title">
    <section>
        <article>
            <h1>Page Title</h1>
        </article>
    </section>
</div>

I use the Foundation 6 framework and use semantic SASS to handle my rows, columns, etc.

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;
            }
        }
    }
}

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.

HERE IS A CODEPEN

Answer 1

the answer too your question would be to use

<div itemprop="name" class="title">
  <section>
    <article>
        <h1>Page Title</h1>
    </article>
  </section>
</div>

If you want to know more I recommend reading up Here You can also use one of googles tools Here