section, article and aside: Grouping Content

Three elements group content inside main. They are often confused, so here is a simple way to choose.

article

An article is content that makes sense on its own, even if it were copied to another site: a blog post, a news story, a product card, a comment.

1
2
3
4

<article>
  <h2>Why I love second-hand books</h2>
  <p>Every used book already has a story before you open it.</p>
</article>

section

A section is a themed group of content, usually with a heading. It is a chapter of a larger whole.

1
2
3
4
5
6
7
8

<section>
  <h2>Opening hours</h2>
  <p>Daily from nine to six.</p>
</section>
<section>
  <h2>Find us</h2>
  <p>14 Maple Street.</p>
</section>

aside

An aside is related to the main content but could be removed without losing its meaning: a sidebar, a pull quote, a note.

1
2
3
4
5
6
7

<article>
  <h2>A short history of the bookshop</h2>
  <p>The shop opened in a former post office.</p>
  <aside>
    <p>Fun fact: the original letterbox is still on the door.</p>
  </aside>
</article>

How to choose