HTML Section Tag

HTML Section Tag <section> is a semantic tag that defines a section of the HTML document. The <section> tag represents a thematic grouping of content within the document. It can be used to split a page into sections, with each section having its own heading, and related content grouped within it.


The basic syntax of the <section> tag is:

1<section> 2 <!-- Content goes here --> 3</section>


The <section> tag supports the following attributes:

  • class
  • id
  • style
  • title


1<!DOCTYPE html> 2<html> 3 <head> 4 <title>HTML Section Tag Example</title> 5 </head> 6 <body> 7 <header> 8 <h1>Header</h1> 9 </header> 10 <nav> 11 <ul> 12 <li><a href="#">Home</a></li> 13 <li><a href="#">About</a></li> 14 <li><a href="#">Contact</a></li> 15 </ul> 16 </nav> 17 <main> 18 <section> 19 <h2>Section 1</h2> 20 <p>Paragraph 1</p> 21 </section> 22 <section> 23 <h2>Section 2</h2> 24 <p>Paragraph 2</p> 25 </section> 26 </main> 27 <footer> 28 <p>Footer</p> 29 </footer> 30 </body> 31</html>

In the example above, we have used the <section> tag to group related content within the <main> section of the HTML document. Each section has its own heading, making it easier to read and understand the content.