The
<section>tag defines a thematic grouping of content on a webpage.
It is used to organize content into sections with a common heading or purpose, such as chapters, tabs, or topic areas.<section>is often used along with headings (<h1>–<h6>) to define logical blocks of content.
Syntax
<section>
<!-- Thematically related content with heading -->
</section>Attributes
| Attribute | Description |
|---|---|
| id | Assigns a unique identifier. |
| class | Specifies one or more class names. |
| style | Inline CSS styling. |
| title | Provides additional information about the element. |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Section Tag Example</title>
</head>
<body>
<h1>Website Overview</h1>
<section style="border: 1px solid #ccc; padding: 15px; margin-bottom: 20px;">
<h2>About Us</h2>
<p>We are a team of web developers specializing in HTML, CSS, and JavaScript.</p>
</section>
<section style="border: 1px solid #ccc; padding: 15px;">
<h2>Our Services</h2>
<p>We provide website design, development, and maintenance services for businesses.</p>
</section>
</body>
</html>Output
Browser Output
You will see distinct sections with borders and headings.
Each <section> visually groups related content together for clarity and better structure.
Use our TryIt Editor to experiment with multiple sections and headings.
Browser Support
Chrome | Firefox | Edge | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
All major browsers support <section> tag.
Notes
<section>is semantic and should contain a heading to describe its content.- Useful for grouping related content logically.
- Can be nested inside
<main>or<article>for structured layout. - Improves accessibility and SEO by providing clear content divisions.
Conclusion
The <section> tag is ideal for organizing thematic content on a webpage.
It provides semantic meaning, improves readability, and helps search engines understand content structure.