Coding and programming reference site

Tag section

The <section> tag in HTML is a semantic element used to define thematic sections of content within a web page. It helps structure content logically, improve readability, and boost accessibility and SEO.

📌 What Is the `<section>` Tag?

<section> defines a standalone block of related content.
It is used for content that has a heading and serves a specific purpose.
Helps browsers, developers, and screen readers understand page layout.

✅ Basic Syntax

<section>
  <h2>Our Services</h2>
  <p>We provide web design, development, and SEO optimization.</p>
</section>

🧩 Visual Breakdown

<body>
  <section>
    <h2>Topic or Theme</h2>
    <p>Details about this topic.</p>
  </section>
</body>

Each <section> typically includes a heading (<h1>–<h6>) to describe its topic.

🧪 Example 1: Website Layout with Sections

<body>
  <section>
    <h1>About Us</h1>
    <p>We are a creative agency building web solutions.</p>
  </section>

  <section>
    <h1>Portfolio</h1>
    <p>Check out our latest projects and designs.</p>
  </section>

  <section>
    <h1>Contact</h1>
    <p>Email us at hello@example.com</p>
  </section>
</body>

🧪 Example 2: Article with Sections

<article>
  <h1>HTML5 Semantic Elements</h1>

  <section>
    <h2>&lt;header&gt;</h2>
    <p>Defines introductory content or navigation links.</p>
  </section>

  <section>
    <h2>&lt;section&gt;</h2>
    <p>Groups content by theme within an article or page.</p>
  </section>
</article>

🎨 Styling Sections with CSS

section {
  padding: 2em;
  margin-bottom: 1.5em;
  border-bottom: 1px solid #ddd;
  background-color: #f9f9f9;
}

🤔 When to Use `<section>`

Use Case	Description
Thematic content blocks	Like “Features”, “Team”, or “FAQ” sections
Inside `<article>`	To divide an article into logical subsections
Web page layout	To split page into meaningful regions

⚠️ Avoid Misuse

Do not use <section> just for styling or layout. Use it only when content has a distinct topic and is usually introduced by a heading.

❌ Incorrect:

<section>
  <div class="wrapper">Just layout</div>
</section>

✅ Correct:

<section>
  <h2>Pricing Plans</h2>
  <p>Choose from Basic, Pro, and Enterprise plans.</p>
</section>

🔁 `<section>` vs Similar Tags

Tag	Use for…
`<section>`	Thematic content with heading
`<div>`	Generic container, no semantics
`<article>`	Self-contained, reusable content
`<aside>`	Related but tangential content

🏁 Summary

The <section> tag is your go-to tool for structuring meaningful areas of a page. It supports better content hierarchy, improves screen reader accessibility, and plays a role in SEO.

Design by ThemesDNA.com

📌 What Is the <section> Tag?