<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> has meaning even if it is viewed by itself. It is clear that the first
<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>
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
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>
Here, you can see we have
CSS in separate sections. Having different sections makes it easier to organize the contents of the document.