Articles, Sections, and Asides

Inside main, three elements organize content.

article

A self-contained piece that would make sense on its own — shared, syndicated in a feed, or reused elsewhere: a blog post, a news story, a product card, a comment.

<article>
  <header>
    <h2>Sourdough for Beginners</h2>
    <p>By Sam Lee · <time datetime="2026-02-01">1 February 2026</time></p>
  </header>
  <p>Sourdough uses wild yeast instead of packaged yeast...</p>
  <footer>
    <p>Tags: <a href="/tags/bread">bread</a>, <a href="/tags/baking">baking</a></p>
  </footer>
</article>

section

A thematic group of content — normally with a heading. Chapters of a long page, tabs, the "Features" and "Pricing" parts of a landing page:

<main>
  <h1>Our Service</h1>
  <section>
    <h2>Features</h2>
    <p>Fast delivery, fresh ingredients.</p>
  </section>
  <section>
    <h2>Pricing</h2>
    <p>From £5 a week.</p>
  </section>
</main>

If a block has no natural heading, it's probably not a section — use a div.

aside

Content related but not essential to what's around it: a sidebar, a "did you know?" box, related links, a pull quote:

<article>
  <h2>Visiting Iceland</h2>
  <p>The best time for the northern lights is between September and March.</p>
  <aside>
    <h3>Did you know?</h3>
    <p>Iceland has no mosquitoes.</p>
  </aside>
</article>

Choosing

• Could it stand alone, out of context? → article
• Is it a titled part of something bigger? → section
• Is it a side note? → aside
• None of the above, just for styling? → div (next lesson)

Articles can contain sections, sections can contain articles (a "Latest posts" section with several article previews), and articles can nest (comments inside a blog post).

Practice

Mark up a "Latest News" section containing two article previews, each with a heading, a date, and a "Read more" link whose text names the article.

<section>
  <h2>Latest News</h2>
  <article>
    <h3>New Shop Opens</h3>
    <p><time datetime="2026-05-02">2 May 2026</time></p>
    <p><a href="/news/new-shop">Read more about the new shop</a></p>
  </article>
  <article>
    <h3>Summer Menu</h3>
    <p><time datetime="2026-06-10">10 June 2026</time></p>
    <p><a href="/news/summer-menu">Read more about the summer menu</a></p>
  </article>
</section>