Page structure

Article, section, and aside

Choose between article, section, and aside by asking whether content stands alone, belongs to a titled section, or is secondary.

8 minute lesson

~~~

Use article for a self-contained composition that could make sense on its own.

<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 can be articles.

Use section for a thematic part of a document. It should normally have a heading.

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

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

Use aside for content that is related but secondary to the surrounding content:

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

An aside inside an article relates to that article. An aside beside the page’s main content often acts as a sidebar.

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

Quick check

Result

You got of right.

Lesson completed