HTML | <section> Tag

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 distribute the sections and subsections.
Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Section tag</title>
    </head>
    <body>
        <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>                    

chevron_right


Output:
section tag

Nested Section tag: The section tag can be nested. The font size of subsection is smaller then 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Section tag</title>
    </head>
    <body>
        <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>                    

chevron_right


Output:
nested section tag

Supported Browsers: The browser which supports section tag are:

  • Google chrome 6.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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : Akanksha_Rai