Article, section, and aside

Semantic containers describe what a block of content is, not how it should look. Three useful ones are article, section, and aside.

Use article for a self-contained piece that could make sense on its own, even if you never publish it separately:

<article>
  <h2>A winter route around the lakes</h2>
  <p>This route stays on cleared cycle tracks.</p>
</article>

Blog posts, news stories, forum posts, and product cards are typical articles. Ask: if I syndicated this block by itself, would it still read coherently?

Use section for a thematic grouping inside a document. A section should normally have a heading:

<section>
  <h2>Routes for beginners</h2>
  <p>Start with short, separated paths.</p>
</section>

Do not reach for section just because you need a wrapper for CSS. If the content has no natural heading or theme, a div is more honest.

Use aside for content that relates to what is nearby but is not the main flow:

<aside>
  <h2>Renting a bicycle</h2>
  <p>Most train stations have a rental shop nearby.</p>
</aside>

An aside inside an article supports that article. An aside next to the page’s main content often works as a sidebar.

These elements have no important default visual difference in browsers. The right question is not “Which one looks right?” Ask what role the content plays in the document.

A common mistake is wrapping every block in <section> without headings. You get extra elements with no outline benefit. If there is no section title, a div or a more specific element is usually clearer.

On your my-page project, put your bio in main, one project write-up in an article, and a short list of favorite links in an aside. View the page source and confirm each block uses the element that matches its role, not just the one that looked convenient in a tutorial.

Quick check

Start quiz

Result

You got of right.

Try again