The section Element vs div
Know when to use section versus a plain div.
The section Element vs div is a free HTML Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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?
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-labelledbyto link the section to its heading - When in doubt — use div; you can always upgrade later
Frequently asked questions
Is the “The section Element vs div” lesson free?
Yes — the full text of “The section Element vs div” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
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; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
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