HTML <section> Tag

What You’ll Learn

The <section> tag is a powerful semantic element for defining thematic sections within a document. This guide covers syntax, attributes, structuring content, accessibility, and best practices for beginners.

What Is the <section> Tag?

The <section> tag is a block-level element that helps structure and organize content on a webpage. It groups thematically related content, making the document’s structure easier to understand for users, search engines, and assistive technology.

Each section should typically include a heading (h1–h6). If you only need a generic container without semantic meaning, use <div> instead.

📝 Syntax

Enclose the content you want to group within opening and closing section tags:

<section>
  <!-- Your content here -->
</section>

Syntax Rules

• Include a heading inside each section when possible.
• Use section for thematic grouping, not as a replacement for div styling.
• Nesting section elements is valid when a subsection belongs to a larger section.
• Do not use section as a generic page wrapper — use main or body content areas.

⚖️ <section> vs <article> vs <div>

Examples Gallery

Divide pages into clear, thematic sections with semantic HTML and beginner-friendly examples.

<section>
  <h2>Introduction</h2>
  <p>Your introductory content here.</p>
</section>

<section>
  <h2>Main Content</h2>
  <p>Your main content goes here.</p>
</section>

<section>
  <h2>Conclusion</h2>
  <p>Summarize your key points in this section.</p>
</section>

<main>
  <section aria-labelledby="features-heading">
    <h2 id="features-heading">Product Features</h2>
    <p>Organized sections help assistive technology navigate your page.</p>
  </section>
</main>

♿ Accessibility

• Include headings — Each section should have an h1–h6 that describes its topic.
• Name landmarks — Use aria-labelledby when the section heading is not sufficient for screen reader navigation.
• Do not overuse sections — Too many unnamed section landmarks can clutter the page outline for assistive technology.
• Prefer semantic elements — Use nav, aside, or article when those roles fit better than a generic section.

💡 Best Practices