Both group thematic content with a heading. The difference: <article> content is self-contained and could stand alone outside the page; <section> content is thematic but depends on the surrounding page for full context.
The Standalone Test
Could this content be pulled out, dropped into an RSS feed or a different website, and still make complete sense on its own? Yes → <article>. No, it only makes sense as part of this specific page's structure → <section>.
Example — article
<article>
<h2>5 Tips for Learning Python</h2>
<p>Start with the basics before jumping into frameworks...</p>
</article>A blog post makes complete sense read on its own, anywhere.
Example — section
<section>
<h2>Why Choose CodingNow</h2>
<p>Live mentorship, real projects, 100% placement support.</p>
</section>This only makes sense as part of the CodingNow homepage — it's not a standalone piece of content you'd syndicate elsewhere.
They Can Nest Either Way
<!-- An article containing sections -->
<article>
<h2>Complete Guide to SQL Joins</h2>
<section>
<h3>INNER JOIN</h3>
...
</section>
<section>
<h3>LEFT JOIN</h3>
...
</section>
</article>
<!-- A section containing articles -->
<section>
<h2>Latest Blog Posts</h2>
<article>...</article>
<article>...</article>
</section>Both nesting directions are valid — it depends entirely on which piece is the standalone, syndicate-able content and which is the thematic grouping around it.
Common Mistakes
- Treating them as interchangeable synonyms — they encode genuinely different meanings
- Defaulting to
<section>for everything because it "sounds more generic and safe"
Interview Relevance
Almost always follows the div-vs-section question in an interview — the standalone/syndication test is the answer that demonstrates real understanding, not memorization.
Practice Question
A page has a "Latest News" block listing 3 news headlines with summaries, and a "Company Mission" block. Decide article vs section for each, and justify with the standalone test.
