HTML section Element

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.”

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.

<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.

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

<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

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.

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>

• 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

• 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

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>

Choose the option that lists all and only the correct statements.

1. When grouping elements purely for styling without semantic meaning
2. When creating a standalone thematic grouping with a heading
3. When you need a generic container
4. When you want to improve document outline structure

Choose the option that lists all and only the correct statements.

1. Headings (<h1> to <h6>)
2. Paragraphs (<p>)
3. Navigation blocks (<nav>)
4. Scripts (<script>)

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