What is grouping in HTML ?

Last Updated : 27 Aug, 2021

Grouping plays a vital role in our web page because it helps the developer to target specific classes and id which makes it easier to position, style, or manipulate the web page with the help of HTML, CSS, or JavaScript.

Grouping can be performed with the help of various tags such as <div>, <header>, <footer>, and <section>.

HTML <div>: It is a block-level tag that groups various HTML tags into a single block. It is styled with CSS or can be manipulated with JavaScript.

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .div1 {
            background: yellow;
        }

        .div2 {
            background: blue;
        }
    </style>
</head>

<body>
    <div class="div1">
        <h1>In Div1</h1>
    </div>
    <div class="div2">
        <h1>In Div2</h1>
    </div>
</body>

</html>

Output:

HTML <header>: This tag contains the tagline or we can say it contains the main heading or the navigation links of our web page and is placed at the top of our web page.

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .div1 {
            background: yellow;
        }

        .div2 {
            background: blue;
        }
    </style>
</head>

<body>
    <header>
        <h1>This is Heading..</h1>

        <p>This is paragraph in the header group</p>
    </header>

    <div class="div1">
        <h1>In Div1</h1>
    </div>
    
    <div class="div2">
        <h1>In Div2</h1>
    </div>
</body>

</html>

Output:

HTML <footer>: This tag contains copyright information, contact information, back-to-top link, and several other related documents and is placed at the bottom of our web page.

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .div1 {
            background: yellow;
        }

        .div2 {
            background: blue;
        }
    </style>
</head>

<body>
    <header>
        <h1>This is heading</h1>

        <p>This is paragraph in header group</p>
    </header>

    <div class="div1">
        <h1>In Div1</h1>
    </div>
    <div class="div2">
        <h1>In Div2</h1>
    </div>

    <footer>
        <p>This is footer information</p>

        <p><a href="mailto:[email protected]">Email</a></p>
    </footer>
</body>

</html>

Output:

HTML <section>: This tag is used to define the section in the document.

Example: