Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

HTML <section> Tag

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

Section tag defines the section of documents such as chapters, headers, footers or any other sections. The section tag divides the content into section and subsections. The section tag is used when requirements of two headers or footers or any other section of documents needed. Section tag grouped the generic block of related contents. The main advantage of the section tag is, it is a semantic element, which describes its meaning to both browser and developer.
Syntax: 
 

<section> Section Contents </section>

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

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: 
 

HTML




<!DOCTYPE html>
<html>
    <body>
        <!-- html section tag is used here -->
        <section>
            <h1>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: 
 

nested section tag

Supported Browsers: 
 

  • Google Chrome 5.0 and above
  • Edge 12.0 and above
  • Internet Explorer 9.0 and above
  • Mozilla 4.0 and above
  • Opera 11.1 and above
  • Safari 5.0 and above

 


My Personal Notes arrow_drop_up
Last Updated : 02 Feb, 2023
Like Article
Save Article
Similar Reads