Adam Norris

Adam Norris

Front-End Developer

← Back to Blog

Should I Be Using Section or Article?

With the introduction of HTML5, four new sectioning content elements were introduced to help create more semantic page layouts. These are <nav>, <aside>, <section> and <article>.

The first two are pretty self-explanatory, but <section> and <article> seem to cause a lot of confusion with people often using them in completely different ways.

Article

The <article> element (see docs) represents a self-contained composition. This could be a blog post, news article or user comment.

This element should be used if the content (in principle) could be reused or distributed somewhere else, such as on a forum or magazine article. It typically will contain a <h1> - <h6> heading.

<!-- use case for the article element -->
<article>
  <h1>This is an article heading</h1>
  <p>This is some article content</p>
</article>

Section

The <section> element (see docs) is used to represent a thematic grouping of content. This could be parts of an article, tabs in a dialog box or the sections on a homepage.

This element should be used if you’d expect to see the content listed in the document outline (think table of contents) and should not be used for styling purposes only. It typically will contain a <h1> - <h6> heading.

<!-- use case for the section element -->
<section>
  <h1>Blog Posts</h1>
  <article>
    <h2>Blog post 1</h2>
  </article>
  <article>
    <h2>Blog post 2</h2>
  </article>
  <article>
    <h2>Blog post 3</h2>
  </article>
</section>

What About Div?

The <div> element (see docs) has no semantic meaning. This should be used when grouping content for stylistic purposes.

<!-- use case for a div -->
<article>
  <h1>This is an article heading</h1>
  <div class="intro-block">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
    <p>Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>  
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

So Which Should I Use?

The easiest way to work out which element to use is to think of it a bit like a flow chart (although it’s important to remember that these elements can be nested inside each other). For completeness, I’ve include <nav> and <aside> in this diagram.

Is the content a navigation block?

YES → Use <nav>

NO ↓

Is the content only tangentially related to the main content?

YES → Use <aside>

NO ↓

Would the content make sense on its own (e.g. outside of the current context)?

YES → Use <article>

NO ↓

Would the content be listed in the outline of the document (e.g. in a table of contents)?

YES → Use <section>

NO ↓

Is the content just being grouped for stylistic reasons?

YES → Use <div>

Flow Chart of HTML Sectioning Content Elements