The <section> element represents a generic section to thematically group content. Every section, typically, should be able to be identified with a heading element as a child of the section.

• You can use the <section> element within an <article> and vice-versa.
• Every section should have a theme (a heading element identifying this region)
• Don’t use the <section> element as a general styling ‘container’.

If you need a container to apply styling, use a <div> instead.

In the following example, we’re displaying a single blog post with multiple chapters each chapter is a section (a set of thematically grouped content, which can be identified by the heading elements in each section).

<article>
    <header>
        <h2>Blog Post</h2>
    </header>
    <p>An introduction for the post.</p>
    <section>
        <h3>Chapter 1</h3>
        <p>...</p>
    </section>
    <section>
        <h3>Chapter 2</h3>
        <p>...</p>
    </section>
    <section>
        <h3>Comments</h3> ...
    </section>
</article>

Notes:

Developers should use the article element when it makes sense to syndicate the contents of the element.

Click here to read the official HTML5 Specification for the <main> element