How and best way to group HTML tags

Let's say you are working on a web page and you want to group a bunch <p></p> tags together, no need to panic HTML provides some tags to the group for such purposes and is often referred to as container tags.

Take a look at the code below, you will notice we have two <p></p> tags of which on a good day we may need to group them maybe for styling purposes or SEO optimization.

 <h1>MY PROFILE</h1>
<p>
    Hi there, I am;
</p>
<p>
    BABATUNDE EBENEZER DARAMOLA @ritechoice23
</p>

To group them, we can use <div></div>.

<h1>MY PROFILE</h1>
<div>
    <p>
        Hi there, I am;
    </p>
    <p>
        BABATUNDE EBENEZER DARAMOLA @ritechoice23
    </p>
</div>

div is the generic container element and is mostly used when we don't have a dedicated container tag for what you want to group.

For instance, if some elements are in the footer of your web page and you want to group them, there is a dedicated container tag for such case <footer></footer>

We have more of these tags section, article, header, aside, main, footer, nav

A simple example of the use of semantic element

<section>
  <header>
    <h1>Title</h1>
  </header>
  <article>
    <p>Article content</p>
  </article>
  <footer>
    <p>page footer</p>
  </footer>
</section>

You can read more about semantic elements on MDN