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:xyz@gmail.com">Email</a></p> 
    </footer> 
</body> 
  
</html> 

Output:

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

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .div1 { 
            background: yellow; 
        } 
  
        .div2 { 
            background: blue; 
        } 
  
        #sectionID { 
            background: grey; 
        } 
    </style> 
</head> 
  
<body> 
    <header> 
        <h1>This is heading</h1> 
  
        <p>This is paragraph in header group</p> 
    </header> 
  
    <section id="sectionID"> 
        <b> 
            <p>This content belongs to section group.</p> 
  
            <p> 
                HTML is a hypertext markup language 
                which is used to design the web pages 
            </p> 
  
            <p>CSS is used to design the web pages.</p> 
  
            <p> 
                Javascript helps us to manipulate our data 
                on a webpage. 
            </p> 
  
            <p>Section group ends here..</p> 
        </b> 
    </section> 
  
    <footer> 
        <p>This is footer information.</p> 
  
        <p><a href="mailto:xyz@gmail.com">Email</a></p> 
    </footer> 
</body> 
  
</html> 