Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What is grouping in HTML ?

  • Difficulty Level : Hard
  • 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>.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!