HTMLSectioning (<section>, <article>)

<section> vs <article>

<section> and <article> both group related content, and both commonly carry a heading—which is why they're so often confused. The distinction is about independence: could this chunk of content be pulled out and make sense entirely on its own, in a different context?
<section> — Thematic Grouping
Use <section> for a thematic grouping of content that belongs to the surrounding page—it typically doesn't make sense removed from its context. Think chapters within a document, or distinct topics within a longer piece.

section.html

HTML
<article>
  <h1>Complete Guide to Houseplants</h1>

  <section>
    <h2>Watering</h2>
    <p>Most houseplants prefer to dry out between waterings...</p>
  </section>

  <section>
    <h2>Light Requirements</h2>
    <p>Match the plant's native habitat to your home's light levels...</p>
  </section>
</article>
Neither "Watering" nor "Light Requirements" would make sense as a standalone piece of content shared elsewhere—they're sections of the guide, not independent pieces.
<article> — Standalone, Reusable Content
Use <article> for content that is self-contained and would still make sense if distributed on its own—syndicated to an RSS feed, shared as a link, or reused on a different site. A blog post, a news story, a product card, a forum comment, and a user review are all classic <article> candidates.

article.html

HTML
<main>
  <h1>Latest Posts</h1>

  <article>
    <h2>Ten Tips for Faster Page Loads</h2>
    <p>Published <time dateTime="2026-03-04">March 4, 2026</time></p>
    <p>Every millisecond counts when a user is waiting on your homepage...</p>
  </article>

  <article>
    <h2>Why Semantic HTML Still Matters</h2>
    <p>Published <time dateTime="2026-02-18">February 18, 2026</time></p>
    <p>Semantic markup has quietly become more important, not less...</p>
  </article>
</main>
Articles Can Contain Sections, and Vice Versa
These elements aren't mutually exclusive—a long <article> is often broken into <section>s, and a <section> can contain several independent <article>s (for example, a "Related Posts" section listing several full articles).

nested.html

HTML
<section>
  <h2>Recommended Reading</h2>

  <article>
    <h3>Getting Started with Flexbox</h3>
    <p>A standalone post that also appears on its own permalink page...</p>
  </article>

  <article>
    <h3>CSS Grid in 10 Minutes</h3>
    <p>Another standalone post, independently syndicated...</p>
  </article>
</section>
When to Use <div> Instead
Not every group of elements is thematic content—sometimes you just need a wrapper for styling or layout purposes, with no semantic meaning of its own. That's exactly what <div> is for.

  • Use <div> for a purely visual/layout wrapper: a grid container, a flex row, a styling hook.

  • Use <section> when the content is a thematic grouping that belongs to its surrounding context.

  • Use <article> when the content could be lifted out and would still make complete sense on its own.

  • If you can’t think of a heading for the group, it’s probably a <div>, not a <section>.

Element

Test

Example

<section>

Does this belong to, and depend on, the surrounding content?

A chapter within a guide

<article>

Could this be extracted and syndicated on its own?

A blog post, a product review

<div>

Is this purely for layout/styling, with no thematic meaning?

A grid wrapper around cards

A heading alone doesn't make something a section
Adding an <h2> inside a <div> doesn't make it semantically a section—the HTML spec generally expects a <section> to have a heading, but the reverse test (does it have a heading) isn't sufficient on its own. Ask whether the content is genuinely thematic first.
Landmark navigation is the payoff
Screen reader users often navigate a page by jumping between landmarks and headings. Correctly distinguishing <section>, <article>, and <div> is what makes that navigation experience coherent rather than a flat wall of content.
Both usually need a heading
A <section> or <article> without a heading is a signal to double-check your markup—most real-world uses of either element include an <h1>–<h6> as their first child.
A Realistic Example: Product Listing Page
A product listing page shows how both elements coexist naturally: the page groups products thematically by category (<section>), while each product card is independent content that could be shared or displayed elsewhere on its own (<article>).

product-listing.html

HTML
<main>
  <section>
    <h2>Running Shoes</h2>

    <article>
      <h3>Trail Runner Pro</h3>
      <p>$120 — Designed for uneven terrain and long distances.</p>
    </article>

    <article>
      <h3>Road Racer Lite</h3>
      <p>$95 — Lightweight cushioning for pavement running.</p>
    </article>
  </section>

  <section>
    <h2>Hiking Boots</h2>

    <article>
      <h3>Summit Trekker</h3>
      <p>$150 — Waterproof and built for multi-day hikes.</p>
    </article>
  </section>
</main>
A Common Mistake: Section as a Generic Wrapper
A frequent misuse is reaching for <section> purely to group elements visually—say, three unrelated cards placed side by side in a grid, with no shared theme beyond appearing together on the page. That's a job for <div>.

misuse-vs-correct.html

HTML
<!-- Misuse: no shared theme, just a layout grid -->
<section class="card-grid">
  <div>Testimonial from Alex</div>
  <div>Latest blog post teaser</div>
  <div>Newsletter signup form</div>
</section>

<!-- Correct: a plain div for layout, no false semantic claim -->
<div class="card-grid">
  <div>Testimonial from Alex</div>
  <div>Latest blog post teaser</div>
  <div>Newsletter signup form</div>
</div>