Open In App

HTML <section> Tag

Improve
Improve
Like Article
Like
Save
Share
Report

The Section tag defines the section of documents such as chapters, headers, footers, or any other sections. The section tag divides the content into sections and subsections.

The section tag is used when requirements of two headers or footers or any other section of documents are needed. Section tag grouped the generic block of related contents. The main advantage of the section tag is, it is a semantic element, that describes its meaning to both the browser and the developer.

Note: Section tag is used to distribute the content i.e., it distributes the sections and subsections. 

Syntax: 

<section> Section Contents </section>

Example 1: The implementation of the section tag

HTML




<!DOCTYPE html>
<html>
 
<body>
    <!-- html section tag is used here -->
    <section>
        <h1>
            Geeksforgeeek: Section 1
        </h1>
        <p>
            Content of section 1
        </p>
    </section>
    <section>
        <h1>
            GeeksforGeeks: Section 2
        </h1>
        <p>
            Content of section 2
        </p>
    </section>
    <section>
        <h1>
            GeeksforGeeks: Section 3
        </h1>
        <p>
            Content of section 3
        </p>
    </section>
</body>
 
</html>


Output: 
 

section tag

Nested Section tag:

The section tag can be nested. The font size of subsection is smaller than section tag if the text contains the same font property. The subsection tag is used for organizing complex documents. A rule of thumb is that section should logically appear in outline of the document. 

Example 2:  The implementation of the nested section tag

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Document</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
 
<body> <!-- html section tag is used here -->
    <section>
        <h1 style="color: green;">
            Geeksforgeeek: Section 1
        </h1>
        <p>
            Content of section 1
        </p>
        <section>
            <h1>Subsection</h1>
            <h1>Subsection</h1>
        </section>
    </section>
    <section>
        <h1>GeeksforGeeks: Section 2</h1>
        <p>Content of section 2</p>
        <section>
            <h1>Subsection</h1>
            <h1>Subsection</h1>
        </section>
    </section>
</body>
 
</html>


Output: 

Screenshot-2023-12-20-132523

Supported Browsers: 

  • Google Chrome 5.0
  • Edge 9.0
  • Mozilla 4.0
  • Safari 5.0
  • Opera 11.5


Last Updated : 17 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments
Similar Reads