<section> vs <article> vs <div>
<article> is self-contained content, <section> is a thematic part of something larger, and <div> is a neutral container with no meaning at all.
Side-by-side comparison
#Carries semantic meaning
Makes sense out of context
Should have its own heading
Role for screen readers
When to choose it
Example
#<article>
<header>
<h2>My first week learning HTML</h2>
</header>
<section>
<h3>What I already know</h3>
<p>Document structure, headings and basic semantics.</p>
</section>
<div class="tags" style="display: flex; gap: 6px;">
<span>HTML</span><span>basics</span>
</div>
</article>Definition and usage
#The difference between <article> and <section> mainly comes down to how self-contained the content is. A good test for <article>: would this piece make sense pulled out of context, for example in an RSS reader or pasted onto another page? If so, it’s an article, say a blog post, a comment or a product card. <section> groups content around a single topic within a larger whole, for example a chapter of an article or a "Pricing" block on the home page, and it usually has its own heading.
<div> carries no meaning at all. It tells screen readers, search engines and other developers nothing about what a given part of the page actually is. It exists purely as a hook for styling in CSS or for finding in JavaScript.
The rule of thumb is: check <article> first (content meant to stand on its own), then <section> (a thematic part with a heading), and leave <div> for situations where you just need a container with no meaning. These elements can also be freely nested, for example comments as <article> elements inside the main article.
Syntax
#<article>...</article>
<section>
<h2>...</h2>
...
</section>
<div>...</div>More examples
#<article>
<h2>How to choose your first programming language</h2>
<p>What matters most is what you want to build.</p>
<section>
<h3>Comments</h3>
<article>
<p><strong>Ola:</strong> I started with Python and don't regret it.</p>
</article>
</section>
</article><section aria-labelledby="pricing-title">
<h2 id="pricing-title">Pricing</h2>
<div class="plans" style="display: flex; gap: 12px;">
<div class="plan">Free</div>
<div class="plan">Premium</div>
</div>
</section><div class="plans"> doesn’t describe the content, it only groups the cards for Flexbox. The heading and the meaning of the section are carried by <section>.
Good practices
#- If you’re torn between
<section>and<div>, ask: does this part have its own topic and heading? If not,<div>is usually enough. - Don’t turn every
<div>into<article>or<section>just to make the code look semantic. Semantics should help, not describe absolutely everything. - Comments under a post are a natural example of nested
<article>elements inside the main article.
Related entries
#- <article>Self-contained content that makes sense read or shared on its own.
- <section>A thematic part of a document, usually with its own heading.
- <div>A generic block-level container with no meaning, for grouping elements and styling.
- <header>An introduction to a page or section: logo, title, navigation, author info.
- <h1>-<h6>Headings at six levels, from the most important h1 to the least important h6. Together they form the page’s outline.
Spotted a mistake or missing an example? Write to us.