Both are generic block containers. The difference is entirely about meaning: <section> represents a thematic grouping of content; <div> represents nothing at all.
The Deciding Question
Would this block of content make sense as its own entry in a document outline, typically with its own heading? If yes, use <section>. If it's purely there to group elements for styling or scripting, use <div>.
Example — Layout Wrapper (div is correct)
<div class="card-grid">
<div class="card">...</div>
<div class="card">...</div>
</div>card-grid has no thematic meaning of its own — it exists purely to arrange cards in a CSS grid. <div> is exactly right here.
Example — Thematic Content (section is correct)
<section>
<h2>Frequently Asked Questions</h2>
<details>...</details>
</section>"Frequently Asked Questions" is a real, distinct theme with its own heading — a textbook <section>.
Practical Test
If you deleted the wrapping element's class/id and it still needs some semantic identity to make sense in the document's structure, it's a section. If deleting the class would leave literally nothing meaningful behind — just an anonymous box — it's a div.
Common Mistakes
- Doing a "find and replace" of every
<div>to<section>without applying the heading/theme test — this is just as wrong as never using section at all - Using
<section>for pure CSS Grid/Flexbox layout wrappers
Interview Relevance
One of the single most common HTML interview questions. Answer with the heading/theme test, not a vague "section is more semantic."
Practice Question
Given a page with a "Testimonials" block (each with a heading) and a pure 3-column layout wrapper around some icons, decide which should be section and which should be div.
