section Element in HTML
Grouping Content with Meaning

HTML <section> Element: Content with Context

In HTML, not everything belongs in a free-floating <div>. Sometimes, you need to group related content with meaning. That’s where <section> comes in — it wraps related content and signals, “this part belongs together.”

What Is the <section> Element?

The <section> element defines a standalone portion of the document that has a thematic purpose. It’s typically used when the content has its own heading and could stand as a logical unit within an outline.

Basic Syntax

<section>
  <h2>Tropical Fruits</h2>
  <p>Banana, mango, and pineapple are popular tropical fruits.</p>
</section>

Tropical Fruits  
Banana, mango, and pineapple are popular tropical fruits.

Why Use <section> Instead of <div>?

| Feature | <section> | <div> | |------------------------|---------------------------------------------|---------------------------------------------| | Semantic meaning | Yes – implies thematic grouping | No – generic block container | | Typically includes a heading | Yes | Optional or uncommon | | Better for accessibility and outlining | Yes | No |

<div> is perfect for layout; <section> is best for meaning.

Example: Homepage Layout Using Sections

<main>

  <section>
    <h2>Featured Fruit: Apple</h2>
    <p>Apples are available year-round and come in many varieties.</p>
  </section>

  <section>
    <h2>Tips for Banana Lovers</h2>
    <p>Bananas ripen faster in a paper bag — a fun kitchen trick.</p>
  </section>

  <section>
    <h2>Cherry Recipes</h2>
    <ul>
      <li>Cherry Pie</li>
      <li>Cherry Smoothie</li>
      <li>Chocolate-Covered Cherries</li>
    </ul>
  </section>

</main>

Featured Fruit: Apple  
Tips for Banana Lovers  
Cherry Recipes:
- Cherry Pie
- Cherry Smoothie
- Chocolate-Covered Cherries

Headings Are Essential

Each <section> should have its own heading (usually <h2>, <h3>, etc.). This improves readability, accessibility, and SEO — and lets screen readers easily navigate the page.

Nested Sections

You can nest <section> elements inside one another for sub-topics:

<section>
  <h2>Banana Basics</h2>
  <p>Bananas are tropical fruits.</p>

  <section>
    <h3>Health Benefits</h3>
    <p>Rich in potassium and energy-boosting.</p>
  </section>
</section>

When to Use <section>

Use <section> when:

• You have a block of content with a clear heading
• The content forms a logical part of the page’s document outline
• You’re grouping content around a specific theme or function

Best Practices

• Always pair <section> with a heading element
• Don’t use <section> just for layout — that’s what <div> is for
• Use semantic structure to improve SEO and screen reader navigation

Summary

The <section> element is perfect for grouping thematically related content. You now know how to:

• Use <section> to structure pages by theme or topic
• Pair sections with meaningful headings
• Decide when to use <section> vs <div>

What’s Next?

In the next tutorial, we’ll step into the sidebar world of <aside> — perfect for complementary content and fun facts.