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.

Syntax

The basic syntax of the <section> tag is:

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

Attributes

The <section> tag supports the following attributes:

  • class
  • id
  • style
  • title

Example

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.