Article and Section

Organize content with <article> (self-contained pieces) and <section> (thematic groups).

Overview

Two commonly confused HTML5 semantic elements are <article> and <section>: **<article>**: self-contained, independently distributable content. Ask yourself: "Would this make sense if I extracted it and put it on another page or in an RSS feed?" If yes, it's an article. Examples: blog posts, news stories, comments, product cards, forum posts. **<section>**: a thematic grouping of related content within a document. It is not self-contained it's a chapter or section in the larger document. Always include a heading inside a <section>. Sections can contain articles, articles can contain sections, and both can be nested.

Key Points

•<article>: self-contained, reusable content blog post, news item, product card, comment
•<section>: thematic grouping a chapter, tab, or subsection with a heading
•Both differ from <div>: they have semantic meaning, not just visual grouping
•A <section> should almost always contain a heading (h2, h3, etc.)
•Articles can be nested inside sections and sections inside articles
•If you're unsure: <section> needs a heading; <article> works as standalone content

Examples

A blog page using both elements

<main>
  <h1>My Blog</h1>

  <section>
    <h2>Latest Posts</h2>

    <article>
      <h3>Getting Started with HTML</h3>
      <p>HTML is the backbone of the web...</p>
      <footer><time datetime="2024-06-01">June 1</time></footer>
    </article>

    <article>
      <h3>CSS Tips for Beginners</h3>
      <p>Learning CSS opens up the power of visual design...</p>
      <footer><time datetime="2024-05-20">May 20</time></footer>
    </article>
  </section>

  <section>
    <h2>Popular Topics</h2>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
    </ul>
  </section>
</main>

An article with sections inside

<article>
  <h2>A Guide to CSS Grid</h2>

  <section>
    <h3>What is Grid?</h3>
    <p>CSS Grid is a two-dimensional layout system...</p>
  </section>

  <section>
    <h3>Basic Syntax</h3>
    <p>Define a grid container with display: grid...</p>
  </section>
</article>

Common Mistakes

Using <section> as a generic block container without a heading inside it
Using <article> for every chunk of content it must be independently distributable
Confusing <section> with <div> use <div> when there is no semantic meaning to the grouping

Note

The W3C test: Is the content self-contained and distributable (could be in an RSS feed or syndicated)? → article. Is it a thematic chapter or group that needs context from its surroundings? → section. Neither? → div.

Article and Section

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

Which element should you use for a single blog post?