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

Multiple HTML sections

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

HTML section element with another nested section element

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.

HTML section element with another nested section element

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

Content organized using HTML Section tags

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.

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges