HTML Academy · Lesson

The section Element vs div

Know when to use section versus a plain div.

Lesson 3 of 413 steps

The section Element vs div is a free HTML Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.

The section Element

The <section> element groups related content into a thematic section:

<section>
  <h2>Contact Information</h2>
  <p>Email: hello@example.com</p>
  <p>Phone: (555) 555-0100</p>
</section>

section vs div

The key question: does this group have a theme or purpose it could be named?

<section> — yes; it represents a thematic grouping, should have a heading
<div> — no; it is just a styling or scripting container

section Requires a Heading

Every <section> should have a heading (<h2>-<h6>):

<!-- Good: section with heading -->
<section>
  <h2>Our Team</h2>
  <ul>...</ul>
</section>

<!-- Bad: section without heading -->
<section class="hero">  <!-- should be a div -->
  <img src="banner.jpg" alt="">
</section>

When to Use section

Use <section> for:

Chapters of a document
Tabs or steps in a wizard
Parts of a long article (Introduction, Methods, Results)
Homepage marketing sections (Features, Pricing, Testimonials)

When to Use div

Use <div> when you just need a container for CSS or JavaScript with no semantic meaning:

<div class="layout">   <!-- just a CSS grid container -->
  <nav>...</nav>
  <main>...</main>
</div>

<div id="modal">       <!-- a JavaScript-controlled modal -->
  ...
</div>

section in a Long Article

Use sections to create chapters within an article:

<article>
  <h1>Complete Guide to HTML5</h1>

  <section>
    <h2>Introduction</h2>
    <p>HTML5 is the fifth version...</p>
  </section>

  <section>
    <h2>Semantic Elements</h2>
    <p>HTML5 introduced many semantic elements...</p>
  </section>

  <section>
    <h2>Forms</h2>
    <p>HTML5 greatly improved form handling...</p>
  </section>
</article>

Homepage Sections

Structured homepage with sections:

<main>
  <section id="hero">
    <h2>Build Better Web Apps</h2>
    <p>The platform for modern developers.</p>
  </section>

  <section id="features">
    <h2>Key Features</h2>
    ...
  </section>

  <section id="pricing">
    <h2>Pricing</h2>
    ...
  </section>
</main>

section Creates Heading Context

Sections create new heading contexts in the HTML5 document outline algorithm:

<section>
  <h2>Chapter 1</h2>   <!-- h2 within section context -->
  <section>
    <h3>Section 1.1</h3>
  </section>
</section>
<!-- Note: the HTML5 outline algorithm was never implemented in browsers -->
<!-- In practice, heading order still depends on h1-h6 numbers, not section nesting -->

aria-labelledby for Sections

Associate a section with its heading for screen readers:

<section aria-labelledby="features-heading">
  <h2 id="features-heading">Features</h2>
  <ul>...</ul>
</section>
<!-- Screen reader: "Features section" when entering the section -->

Decision Flowchart

Which container element to use?

Major navigation? → <nav>
Primary page content? → <main>
Self-contained content? → <article>
Thematic grouping with a heading? → <section>
Sidebar or related content? → <aside>
Just a styling container? → <div>

section Without Heading: Use div

If you cannot give a section a heading, use div instead:

<!-- This has no heading — it is just a CSS layout container -->
<!-- Use div, not section: -->
<div class="two-column">
  <div class="column">Left content</div>
  <div class="column">Right content</div>
</div>

Quick Check

When should you prefer div over section?

Answer it in the interactive lesson

Recap: section vs div

section vs div essentials:

<section> — thematic group, should have a heading
<div> — semantically neutral container for styling/scripting
section creates a named landmark region for screen reader navigation
Add aria-labelledby to link the section to its heading
When in doubt — use div; you can always upgrade later

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 40
Lessons: 159

Start learning free View the full course

Frequently Asked Questions

Is the “The section Element vs div” lesson free?

Yes — any 3 lessons of the HTML Academy learning path, including “The section Element vs div”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.

What will I learn in “The section Element vs div”?

Know when to use section versus a plain div. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

How long does the “The section Element vs div” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

header nav main and footer
The article Element Self-Contained Content
The section Element vs div
Time address and mark

← Back to HTML Academy