The <section> element groups a thematic block of content — one that would normally have its own heading if you were writing a document outline.
Syntax & Example
<main>
<section>
<h2>Our Courses</h2>
<p>AI, Data Science, and Full Stack programs.</p>
</section>
<section>
<h2>Student Success Stories</h2>
<p>Read how our alumni landed their first tech jobs.</p>
</section>
</main>The Rule of Thumb: Does It Have Its Own Heading?
If a chunk of content would appear as its own item in a document's table of contents, it's probably a <section>. If it's just a styling wrapper with no real thematic identity, it's probably a <div> — see div vs section.
section Is Not Just a Styled div
<!-- Wrong: no thematic content, just a layout wrapper -->
<section class="flex-row">
<div class="col">...</div>
<div class="col">...</div>
</section>
<!-- Right: use div for pure layout wrappers -->
<div class="flex-row">
<div class="col">...</div>
<div class="col">...</div>
</div>Practical Use Case
Breaking a long landing page into logical chunks — "Features," "Pricing," "Testimonials," "FAQ" — each as its own <section> with a heading, which also gives you natural anchor points for in-page navigation.
Common Mistakes
- Using
<section>as a generic replacement for every<div>— if there's no real theme or heading, it should be a<div> - Omitting a heading inside a
<section>— not strictly invalid, but usually a sign the element is being used for layout, not meaning
Interview Relevance
"When would you use section vs div?" is asked constantly — the heading-based rule of thumb above is the cleanest, most defensible answer.
Practice Question
Break a single long "About Us" page into 3 logical sections, each with its own heading.
