HTML <section> Tag

The HTML <section> tag is a semantic HTML tag used to define a section in the document that generally includes a group of related content. For example,

<section>
    <h2>Java</h2>
    <p>Java is used to develop Android applications, enterprise software, etc.</p>
</section>

<section>
    <h2>JavaScript</h2>
    <p>JavaScript is used to create dynamic single-page web applications.</p>
</section>

Browser Output

Here, the <section> has meaning even if it is viewed by itself. It is clear that the first <section> is about Java and the second one is about Javascript.

Note: The <section> tag should always have a heading.

Nested <section> tag

We can have a <section> inside a <section> tag. It is called a nested <section> tag. For example,

<section>
    <h2>Animals</h2>
    <p>Animals can be divided into various categories: </p>
    <section>
        <h3>Aves</h3>
        <p>Aves are animals with wings and feathers. </p>
    </section>
</section>

Browser Output

Here, we have a section with the heading Animals and a paragraph which is the main section and we have another section nested inside it with the heading Aves.

When to use HTML <section> Tag?

We use the HTML <section> tag to organize complex documents. For example,

<section>
    <h2> HTML </h2>
    <p> HTML is a standard markup language for creating using HTML elements. </p>

    <section>
        <h3>Why learn HTML?</h3>
        <p> You should learn HTML if you want to build, manage or improve websites. </p>
    </section>

</section>

<section>
    <h2> CSS </h2>
    <p> CSS is used to style HTML elements. </p>
</section>

Browser Output

Here, you can see we have HTML and CSS in separate sections. Having different sections makes it easier to organize the contents of the document.