section, article and aside

Concept

These three elements group content, and beginners choose between them by feel. There are actual tests.

article

Self contained. If the content could be lifted out and syndicated - into a feed, an email, another site - and would still be complete, it is an article.

<article>
  <header>
    <h2>Reading a bus timetable</h2>
    <p>By Meera Iyer, <time datetime="2026-03-02">2 March 2026</time></p>
  </header>

  <p>Every route in the city, and the two worth waiting for.</p>

  <footer>
    <p>Filed under <a href="/tags/transport">transport</a></p>
  </footer>
</article>

The name is broader than it sounds. All of these are articles: a blog post, a news story, a product card, a forum post, a user comment, a review, a job listing.

Articles nest, and comments are the standard example - each comment is itself self contained:

<article>
  <h2>Reading a bus timetable</h2>
  <p>...</p>

  <section>
    <h3>Comments</h3>

    <article>
      <h4>Arun</h4>
      <p>Route 27 is faster after six.</p>
    </article>

    <article>
      <h4>Sana</h4>
      <p>Only on weekdays.</p>
    </article>
  </section>
</article>

section

A thematic grouping within something larger. A chapter, a part of a page, a stage in a process.

The rule that settles most cases: a section should have a heading. If you cannot name it, you almost certainly want a div.

<main>
  <h1>Admission 2026</h1>

  <section>
    <h2>Eligibility</h2>
    <p>...</p>
  </section>

  <section>
    <h2>Documents required</h2>
    <p>...</p>
  </section>

  <section>
    <h2>Fees</h2>
    <p>...</p>
  </section>
</main>

A section becomes a region landmark only when it has an accessible name, from a heading or an aria-label. An unnamed section is not exposed as a landmark at all, which is another reason the heading matters.

aside

Tangentially related. Content that supports the main content but is not part of it, and whose removal would not damage it.

<!-- page level: a sidebar -->
<aside aria-label="Related courses">
  <h2>Related courses</h2>
  <ul>
    <li><a href="/courses/design">Design</a></li>
  </ul>
</aside>

<!-- inside an article: a pull quote or a note -->
<article>
  <h2>Reading a bus timetable</h2>
  <p>...</p>

  <aside class="note">
    <h3>A note on night services</h3>
    <p>Night buses use a separate numbering scheme.</p>
  </aside>

  <p>...</p>
</article>

aside is not the thing on the right. Position is a CSS decision. An aside is content that is genuinely secondary, wherever it happens to be drawn.

A decision walk through

For any block of content, ask in order:

1. Is it self contained and syndicatable? Yes, it is an article.
2. Is it secondary to the surrounding content? Yes, it is an aside.
3. Is it a named thematic part of a bigger whole? Yes, it is a section.
4. Is it a group of items? Yes, it is a ul or ol.
5. Is it only there for layout or styling? Yes, it is a div.

Example: a page using all three

<main>
  <h1>Design course</h1>

  <section>
    <h2>What you will study</h2>
    <p>...</p>
  </section>

  <section>
    <h2>Student work</h2>

    <article>
      <h3>A wayfinding system for the old market</h3>
      <p>...</p>
    </article>

    <article>
      <h3>Redrawing the city bus map</h3>
      <p>...</p>
    </article>
  </section>
</main>

<aside aria-label="Course details">
  <h2>At a glance</h2>
  <dl>
    <dt>Duration</dt><dd>Three years</dd>
    <dt>Intake</dt><dd>Sixty students</dd>
  </dl>
</aside>

Important rules

• A section without a heading is usually a div.
• An article should also carry a heading.
• Articles may nest; a nested article belongs to its parent.
• section is not a styling wrapper. Use div for that.
• An unnamed section is not exposed as a landmark.
• aside is about relationship, not position.

Common mistakes

• Using section everywhere a div was used before, out of a vague sense that it is more modern.
• Sections with no headings, producing an outline full of unnamed regions.
• Using article for any block of text, including page furniture.
• Treating aside as the sidebar element.
• Wrapping the whole page in one section.
• Nesting a main inside an article.

Best practices

• Apply the tests in order and take the first that fits.
• Give every section and every article a heading.
• Label an aside when the page has more than one.
• Prefer div without embarrassment when nothing meaningful applies.
• Read the heading outline afterwards; it exposes wrong choices immediately.

Practice

1. Mark up a blog post page with a header, an article, a comments section of nested articles and a sidebar.
2. Take a page full of section elements and reclassify each one using the tests.
3. Write a product card and justify why it is an article.
4. Find a section with no heading in your own work and decide what it should be.