In HTML, how do you decide between <article>, <section>, and <div> for a block of page content?

## The decision, in order The three elements are not interchangeable and they are not a quality ladder. They answer different questions. **Would the content stand alone?** If you could syndicate this block — put it in an RSS feed, a "related posts" widget, a reader view, another page — and it would still be coherent, it is an `<article>`. The spec's wording is "a complete, or self-contained, composition… intended to be independently distributable or reusable". Blog posts, news stories, product cards, user comments, forum posts, and interactive widgets all qualify. Note that self-contained does not mean top-level: a comment is an `<article>` nested inside the post's `<article>`, and that nesting is exactly how the spec expects comments to be marked up. **Is it a thematic part of something larger, with a heading?** Then it is a `<section>`. The heading test is the practical one: HTML says a `<section>` should normally have a heading, so if you cannot write a sensible heading for the block, it is probably not a section. "Pricing", "FAQ", "Specifications", "Chapter 3" are sections. A row of three cards is not a section just because it is visually distinct. **Otherwise, `<div>`.** A wrapper that exists to hold a grid, a border radius, a scroll region, a transform, or a JavaScript hook is a `<div>`, and reaching for a semantic element instead is a downgrade, not an upgrade — you are asserting meaning that is not there. ## What each one actually does ```html <main> <h1>Notebooks</h1> <section aria-labelledby="featured-h"> <h2 id="featured-h">Featured</h2> <div class="grid"> <!-- pure layout --> <article> <h3>Model 14</h3> <p>Lightweight and fast.</p> </article> <article> <h3>Model 16</h3> <p>More screen, more ports.</p> </article> </div> </section> </main> ``` Each product card is independently distributable, so it is an `<article>`. "Featured" is a thematic part of the page with a heading, so it is a `<section>`. The grid wrapper carries no meaning at all, so it is a `<div>`. In the accessibility tree, `<article>` maps to the `article` role; `<section>` maps to `region` **only when it has an accessible name** (here, via `aria-labelledby` pointing at its heading) and to generic otherwise; `<div>` maps to generic always. That last detail explains why sprinkling `<section>` everywhere is often a no-op — an unnamed section is, to assistive technology, exactly the `<div>` you were trying to avoid. ## Where candidates go wrong The most common failure is the belief that `<div>` is bad markup and every `<div>` should be upgraded. That produces `<section class="flex-row">` and `<article class="card-shell">` on blocks that are neither. Semantics you do not mean are worse than no semantics: a screen-reader user who navigates into an "article" expecting a self-contained composition and finds a layout wrapper has been misled. The second failure is the opposite reflex — treating `<article>` as "only for blog posts". Anything self-contained qualifies, including a widget or a card, and a page can contain many articles. The third is assuming these elements do something visual or something for search ranking. They do not change rendering (beyond the user-agent stylesheet's block display), and the value is the meaning carried into the accessibility tree and into any tool that parses structure — not a ranking lever. ## A quick heuristic to say out loud "Self-contained and reusable → `article`. Thematic chunk that deserves a heading → `section`. Nothing to say about it → `div`." Then be ready to defend a real example on your own CV site or the interviewer's page. Interviewers ask this specific question constantly because it is where a candidate either recites a list of HTML5 tags or demonstrates that they have actually made the choice on real markup.