HTML section vs article

The <section> and <article> elements are two of the most confused tags in HTML5. Both are generic-looking block containers, both showed up in the same 2008 semantic-elements push, and both render identically with no built-in styling — so it’s tempting to treat them as interchangeable. They aren’t. Each communicates a different idea to the browser’s accessibility tree, to search engines, and to the next developer who reads your markup, and picking the wrong one quietly breaks the semantic outline of your page even though nothing looks broken visually.

Overview / How it works

<article> marks up a piece of content that is self-contained and independently distributable. Ask yourself: could this chunk of content be pulled out of the page, dropped into an RSS feed, a newsletter, or a different website, and still make complete sense on its own? A blog post, a news story, a forum comment, a product card, or a single user review are all articles — each one stands alone with its own beginning and end.

<section> marks up a thematic grouping of content within a document. It doesn’t need to make sense in isolation; it exists to break a larger page or article into labeled chunks, typically each with its own heading. Think of the chapters of a book, or the “About”, “Services”, and “Contact” parts of a homepage — none of those chunks is a standalone piece of content you’d syndicate elsewhere, but each is a distinct theme within the whole.

In the DOM, both elements are ordinary block-level containers with zero default visual styling beyond display: block — the browser does not indent, border, or otherwise decorate either one. The difference lives in the accessibility tree and the document outline the browser (and assistive technology) builds from your markup. A properly used <article> is exposed to screen readers with the ARIA role article, letting users jump between articles on a page (e.g., between posts on a blog index). A <section> is exposed with the role region — but only if it has an accessible name, which in practice means it has a heading (an <h2>–<h6>) or an aria-label. An unlabeled <section> is announced by most screen readers no differently than a plain <div>, because without a name it adds noise rather than navigation value.

Syntax

<article>
  <h2>Article heading</h2>
  <p>Self-contained content that would still make sense if syndicated elsewhere.</p>
</article>

<section>
  <h2>Section heading</h2>
  <p>A themed chunk of a larger page or article.</p>
</section>

Aspect	<article>	<section>
Purpose	Independent, reusable piece of content	Thematic grouping within a larger whole
Stands alone?	Yes — makes sense if extracted	No — depends on surrounding context
Implicit ARIA role	article	region (only when labeled with a heading or aria-label)
Typical examples	Blog post, news story, comment, product card	Chapter, tabbed panel, page section like “Contact”
Needs a heading?	Recommended, not required	Strongly recommended — otherwise behaves like a plain div

Examples

Example 1: A standalone article

<article>
  <h2>Why the Coastal Trail Closed Early This Year</h2>
  <p>Park rangers cited unstable cliffside erosion after last month's storms.</p>
  <p>The trail is expected to reopen once a new retaining wall is complete.</p>
</article>

Result: The browser renders a heading followed by two paragraphs, stacked vertically, with no visible border or special styling — visually indistinguishable from plain paragraphs in a div. Under the hood, though, the browser’s accessibility tree exposes this whole block as a single article landmark, so a screen reader user can jump straight to “Why the Coastal Trail Closed Early This Year” using a landmark-navigation shortcut.

Example 2: Sections dividing a homepage

<section>
  <h2>About Us</h2>
  <p>We build hiking gear designed for wet climates.</p>
</section>
<section>
  <h2>Our Services</h2>
  <p>Custom boot fitting, gear repair, and guided trail consultations.</p>
</section>
<section>
  <h2>Contact</h2>
  <p>Reach us at the shop or by phone during business hours.</p>
</section>

Result: Three stacked blocks appear, each starting with its own heading, again with no default visual separation between them. What changes is the document outline: the page now has three named regions — “About Us”, “Our Services”, and “Contact” — that a screen reader’s region-navigation feature can list and jump between, the same way a table of contents would.

Example 3: Nesting section inside article (and vice versa)

<article>
  <h2>Complete Guide to Sourdough Starters</h2>
  <p>Everything you need to grow and maintain a healthy starter.</p>
  <section>
    <h3>Day 1–3: Getting Started</h3>
    <p>Mix equal parts flour and water and leave uncovered.</p>
  </section>
  <section>
    <h3>Day 4–7: Building Strength</h3>
    <p>Begin daily feedings as bubbles appear.</p>
  </section>
</article>

Result: One long article renders as a heading followed by an intro paragraph and two labeled subsections, each with its own heading. This is the classic legitimate nesting pattern: the outer <article> is the whole self-contained guide, and the inner <section> elements are thematic chapters of that one piece — they would not make sense pulled out and syndicated on their own, so they’re sections, not nested articles. The reverse pattern is just as common: a <section> labeled “Latest Posts” that contains several independent <article> elements, one per blog post, each of which could be individually shared or fed into an RSS reader.

How it works step by step / Under the hood

• The HTML parser encounters <article> or <section> and creates a corresponding generic HTMLElement node in the DOM — there is no specialized interface like HTMLTableElement; both use the plain HTMLElement interface.
• The browser’s rendering engine applies the default user-agent stylesheet rule article, section, div { display: block; }, so both simply stack vertically like any block box, with no border, background, margin, or padding of their own.
• Separately, the browser (or assistive-technology layer) builds an accessibility tree alongside the DOM. During this pass, <article> nodes are mapped to the article role automatically. <section> nodes are checked for an accessible name (a heading or aria-label); if one exists, the node becomes a region landmark, otherwise it’s exposed with no distinct role, effectively invisible to landmark navigation.
• Search engines and outline-generating tools use the same heading + sectioning-element structure to infer a page’s logical outline, which is one reason meaningless <section> wrapping (see below) can dilute how your content is understood.

Common Mistakes

Mistake 1: Using <section> as a styling hook instead of <div>.

<section class="card">
  <p>Free shipping on orders over $50.</p>
</section>

This section has no heading and no independent theme — it’s just a box someone wanted to style. Because it lacks an accessible name, it provides no real landmark benefit but still adds semantic clutter. A plain wrapper with no thematic meaning should be a <div> instead:

<div class="card">
  <p>Free shipping on orders over $50.</p>
</div>

Mistake 2: Wrapping every article in an unnecessary section.

<section>
  <article>
    <h2>Weekly Update</h2>
    <p>Here's what shipped this week.</p>
  </article>
</section>

A lone article doesn’t need a themed grouping around it — there’s nothing being grouped. Use <section> only when it genuinely groups multiple related items or themed content, such as a list of several articles:

<section>
  <h2>Recent Updates</h2>
  <article>
    <h3>Weekly Update</h3>
    <p>Here's what shipped this week.</p>
  </article>
  <article>
    <h3>Bug Fix Roundup</h3>
    <p>Three issues resolved this sprint.</p>
  </article>
</section>

Mistake 3: Treating a sidebar widget or ad block as an article. A “related links” widget or a promotional banner isn’t a standalone, independently distributable piece of content, so it shouldn’t be an <article>. Elements like that usually belong in <aside>, or a plain <div> if they carry no distinct theme at all.

Best Practices

• Give every <section> a heading (<h2>–<h6>) or, if a visible heading doesn’t fit the design, an aria-label — an unlabeled section provides no accessibility benefit over a <div>.
• Ask the “syndication test” before reaching for <article>: would this content still make complete sense if copied to another site or RSS feed? If not, it’s probably a <section>, an <aside>, or a plain <div>.
• Default to <div> for purely presentational wrappers (layout grids, styling hooks) that carry no thematic or standalone meaning — not every container needs to be semantic.
• Nested <article> elements are valid and useful for things like a blog post with embedded comments, where each comment is itself an independent, quotable unit.
• Keep heading levels logical as you nest — an <h2> on the outer <article> paired with <h3> headings on its inner <section> elements keeps the outline coherent for both sighted users skimming and screen reader users navigating by heading level.
• Remember that neither element applies any visual styling — layout, spacing, and appearance are entirely the job of CSS, covered in the CSS course.

Practice Exercises

• Exercise 1: Mark up a single recipe (title, ingredient list, and instructions) as a self-contained piece of content that could be shared on its own. Which element should wrap it, and why?
• Exercise 2: Build a simple product page with three themed parts — “Description”, “Specifications”, and “Reviews” — each with its own heading. Decide which of the three parts, if any, should itself contain nested <article> elements, and explain your reasoning.
• Exercise 3: Take this incorrect snippet and fix it: <section class="btn-wrap"><p>Click below</p></section>. What’s semantically wrong with using <section> here, and what should replace it?

Summary

• <article> is for self-contained content that would still make sense if extracted and syndicated elsewhere — blog posts, news stories, comments, product cards.
• <section> is for thematic groupings within a larger document — chapters, page regions, grouped lists of articles.
• Both render as plain block boxes with no default styling; the real difference is in the accessibility tree, where <article> maps to the article role and a labeled <section> maps to the region role.
• An unlabeled <section> (no heading, no aria-label) behaves like a plain <div> to assistive technology, so always give sections a heading.
• Don’t use either element as a generic styling wrapper — use <div> when there’s no thematic or standalone meaning to convey.
• Articles and sections can nest inside each other in both directions, as long as each nested element genuinely fits its own definition.