Skip to main content
📄 HTML & the platform·Module A2 · Lesson 4
TaskBuild a blog page: <main> contains an <article> with <h1>My post</h1> and <p>First paragraph</p>. After that article, add a second <article> with <h2>Comment</h2><p>Great post.</p>.

<article> vs <section>: when each is right

100 XP8 min
Theory

The single test that resolves the article-vs-section debate

Ask: "Could this content stand alone on its own page (RSS, syndication, separate URL) and still make sense?"

  • Yes<article>. Blog posts, product cards, tweets, comments, news items.
  • No<section> (when you also need a heading). It's a thematic group within a bigger thing.
<main>
  <article>
    <h1>Why I left Vim for VS Code</h1>
    <p>Date: 2026-05-20…</p>
    <p>For 15 years I used Vim…</p>
  </article>
</main>

That <article> could be syndicated to RSS, copied to a planet aggregator, or rendered standalone. It's self-contained.

<article>
  <h1>Annual Report 2025</h1>

  <section>
    <h2>Financial highlights</h2>
    <p>…</p>
  </section>

  <section>
    <h2>Team growth</h2>
    <p>…</p>
  </section>
</article>

The <section>s only make sense inside the report. Each has its own <h2> (every <section> SHOULD have a heading — that's the rule).

When NOT to use <section>

If you just need a styling wrapper and there's no heading → use <div>. <section> without a heading is technically a misuse (axe will warn). <div> is fine for layout-only grouping.

🔒

Sign up to start coding

Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial — card required, cancel anytime.

Sign up — free trial →

First 15 lessons in each track are free. No card needed for those.

PreviousNext lesson →

Get one Python or web tip a day — by email

Short, hand-written, no spam. Unsubscribe in one click.