Open In App
Related Articles

How to separate the section from another section in HTML ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

HTML 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, which describes its meaning to both browser and developer.

In this article, we will discuss how to separate a section from another section in HTML.

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

<section> Section Contents </section>

Example: In this example, we will see how to separate the sections.

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:

Nested Section tag: The section tag can be nested. The font size of the subsection is smaller than the 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 the section should logically appear in the outline of the document.

Example: In this example, we will see the nested section.

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:



Last Updated : 15 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads