The <section> element

As per the MDN definition:

The HTML Section Element (<section>) represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading. Each <section> should be identified, typically by including a heading (<h1>-<h6> element) as a child of the <section> element.

Here are a few important points to remember about the <section> element:

The <section> element can be used to encapsulate a group of related content. This related content doesn't necessarily have to make sense if we take it out of the page's context.
A safe and valid way to use the <section> element is to place it inside an <article> element. You can certainly use the <article> element without a <section> element. It's recommended, although not required, to include a heading element (<h1>, <h2>, <h3>, and so on) when using the <section> element.
It can be confusing to know when to use the <section> element and when to use the <article> element. If you're in doubt, you can choose either element.
There can be more than one <section> in a single page.

Consider the following example:

<body>
   <main class="main-container" role="main">
      <article class="article-container flex-container">
         <section class="main-content">
            <header>
               <h1>The <code>&lt;main></code> element  </h1>
            </header>
            <p>As per the MDN definition:</p>            <blockquote>
               <p>The HTML Main Element (<code>&lt;main></code>)                      represents&hellip;</p>
            </blockquote>
         </section>
      </article>
   </main>
</body>

Table of Contents for Mastering Responsive Web Design

The <section> element

Table of Contents for
Mastering Responsive Web Design