HTML <section> Tag – Content Section
📌 Introduction
The <section> tag is used to group related content together inside a webpage.
Each section usually has a heading and represents a logical part of the page.
Examples:
- About section
- Services section
- Contact section
- Blog sections
🧱 Syntax
<section>Content here</section>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Section Example</title>
</head>
<body>
<main>
<section>
<h2>About Us</h2>
<p>We are a web development company.</p>
</section>
<section>
<h2>Our Services</h2>
<p>We build websites and apps.</p>
</section>
</main>
</body>
</html>
🖥️ Output Explanation
- Each
<section>groups related content - Each section usually starts with a heading
- The page becomes structured and readable
🎯 When to Use <section>
Use it for:
- Parts of a webpage with a clear topic
- Grouping related content
- Dividing long pages into logical blocks
Example:
<section>
<h2>Contact</h2>
<p>Email: example@email.com</p>
</section>
🧠 Important Concept
👉 Each <section> should usually have a heading (<h1>–<h6>)
✔ This improves structure and SEO
⚖️ <section> vs <div>
| Tag | Purpose |
|---|---|
<section> |
Semantic content block |
<div> |
Generic container |
✔ Use <section> when content has meaning
❌ Don’t use it just for styling
🧩 <section> vs <article>
| Tag | Use |
|---|---|
<section> |
Group related topics |
<article> |
Independent content (like blog post) |
🚫 Common Mistakes
- Using
<section>without headings ❌ - Using it like a
<div>❌ - Overusing it for everything ❌
🎨 Styling Example
<section style="padding:20px; background:#f0f0f0;">
<h2>Services</h2>
<p>We build modern websites.</p>
</section>
🧪 Mini Exercise
Create a page with:
A
<main>elementInside it, create 3 sections:
- About
- Services
- Contact
Each section should have a heading and paragraph
Add background color to each section