Semantic article section aside

When to use article, section, and aside — standalone content vs thematic grouping vs complementary, with heading pairing.

beginner3 min readUpdated Aug 4, 2026

html
semantics
article
section

article, section, and aside are sectioning elements with different intent. Swapping them for div doesn’t change the paint, but it changes how tools and humans interpret structure. Using them randomly also doesn’t magically improve SEO — meaning matters.

Docs: MDN <article>, <section>, <aside>.

article — self-contained composition

Use <article> when the block could stand alone — a blog post, a card in a feed, a comment, a product widget that makes sense out of page context.

<article>
  <header>
    <h2>
      <a href="/blog/css-gap">Gap vs margin in layouts</a>
    </h2>
    <p><time datetime="2026-08-04">August 4, 2026</time></p>
  </header>
  <p>Prefer gap in flex and grid for inter-item spacing…</p>
</article>

Nested articles are valid (comment threads): outer post, inner comments as articles.

section — thematic grouping

Use <section> for a thematic group with a heading inside a larger whole — “Features”, “Pricing”, “API reference” chapters.

<section aria-labelledby="features-title">
  <h2 id="features-title">Features</h2>
  <p>…</p>
</section>

If you only need a styled box with no heading/theme, a div is fine. A section without a heading is often a smell.

aside — complementary

<article>
  <h1>Understanding CLS</h1>
  <p>…</p>
  <aside>
    <h2>Related</h2>
    <ul>…</ul>
  </aside>
</article>

<aside> is for content tangentially related — pull quotes, related links, secondary definitions. Not “the left column of the grid” by default; the sidebar might be nav or another section if it’s primary navigation.

Decision table

Content	Element
Blog post / feed item / comment	`article`
Chapter of a page with heading	`section`
Related links / tangential note	`aside`
Pure layout wrapper	`div`
Main page content	`main` (once)

Headings still rule

Sectioning elements don’t replace a solid heading hierarchy. AT users navigate headings more than the theoretical HTML outline algorithm.

<main>
  <h1>Dashboard</h1>
  <section aria-labelledby="usage-h">
    <h2 id="usage-h">Usage</h2>
    …
  </section>
  <section aria-labelledby="invoices-h">
    <h2 id="invoices-h">Invoices</h2>
    …
  </section>
</main>

Interview out-loud

“article is self-contained content that could be syndicated alone. section groups thematically under a heading. aside is complementary. Layout-only wrappers stay divs. I pair sections with headings and don’t expect tags alone to fix accessibility without structure.”

Footguns

Wrapping the whole page in one giant article.
Section-per-div for CSS grid.
Aside for primary navigation (should be nav).
Articles without titles/headings in a list of cards.
Believing the HTML5 outline algorithm will save skipped headings.

Blog index vs post

Index: list of <article> cards inside a <section> or directly in <main>.
Post page: one primary <article> containing the post; optional <aside> for TOC or related posts; site chrome remains header/nav/footer outside the article.

<main>
  <article>
    <h1>…</h1>
    <div class="prose">…</div>
  </article>
  <aside aria-label="Related">…</aside>
</main>

Comments can be nested <article> elements under a comments section — each comment is self-contained.

Docs sites

Each docs page is typically one article or simply content in main with sections per heading. Side navigation is nav, not aside, when it is primary navigation. “On this page” TOC can be nav aria-label="On this page" sticky in a grid column. Reserve aside for truly complementary callouts or related links blocks.