HTML article and section: mark standalone content and named subdivisions

Last updated: 5 Oct 20266 min read

tutorial

article is content that can stand on its own; section groups related content under a common heading.

Use it for a real task

A report feed contains independent receipt notices, each with its own heading and status. Inside one notice, a section separates review instructions. A generic wrapper remains appropriate when the grouping exists only for layout; article and section should carry actual content meaning.

<main>
  <h1>Receipt notices</h1>
  <article aria-labelledby="notice-47">
    <h2 id="notice-47">Receipt R-47 is ready</h2>
    <p>The export window closes at 18:00.</p>
    <section aria-labelledby="review-47">
      <h3 id="review-47">Review steps</h3>
      <p>Confirm the amount before approving.</p>
    </section>
  </article>
</main>

What the markup guarantees

A screen reader can jump to the article heading, and the nested section has its own name. Nesting does not invent a new heading rank; choose h2 and h3 from the actual document outline.

Cost and limits

Semantic wrappers have negligible runtime cost. Maintenance suffers when every styled card becomes an article, because the structure no longer distinguishes reusable content from decoration.

Common Mistakes

Do not use section as a generic styling hook.
Give substantial sections a heading.
An article can contain sections, but a layout column is not automatically either one.

Connected lessons

Continue with HTML br and hr: separate a line from a change of subject.

Continue with HTML ordered-list numbering: keep source order and displayed rank aligned.

html

semantics