HTML Section Tag

Among the varieties of HTML tags, the HTML <section> tag is an important tag for the HTML document like other tags. This tag plays a lead role in those HTML documents where a section is a must for separating some contents in general. In this tutorial, you will learn about the HTML <section> tag.

Section tag specifies the section of an HTML document. The HTML <section> tag separates the source content into sections or subsections. So users can use this <section> tag when conditions for two headers or footers or any other section of documents are needed. Section tag grouped the generic block of related contents.

The objective of the HTML <section> element is to present a generic section of an HTML document or content. It is important that the HTML <section> element must not be a child component of the HTML <address> element. The <section> element exists as a semantic element. It provides meaning to the enclosed content, focusing on that distinct section of the HTML document to both the user and the web browser.

Syntax:

<section>Write your content here.</section>

The <section> element is a structural HTML part designed by the developers to apply to a group of related elements. Each <section> generally holds one or more than one heading element and other elements suggesting related content.

When users organize their content on a Web page, it may include multiple headers, footers, chapters, or separate sections on the Web page; that is why users need to use this HTML <section> tag.

Example usage of HTML <section> tag is as follows:

Example:

<!DOCTYPE html>
<html>

    <head>
        <title>Example of using the HTML Section tag</title>
    </head>

    <body>
        <section>
            <h1>Section Heading</h1>
            <p>This is a sample text inside the section.</p>
        </section>

        <section>
            <h1>Section Heading</h1>
            <p>This is a sample text inside the section.</p>
        </section>

        <section>
            <h1>Section Heading</h1>
            <p>This is a sample text inside the section.</p>
            <section>
                <h1>Subsection Heading</h1>
                <h1>This is a sample text inside the Subsection.</h1>
            </section>
        </section>
    </body>

</html>