When should I use article, section, or a generic container?

Ask what the content itself represents—not what shape or visual style you want.

1. Could this content make sense as a distinct, self-contained piece? Consider <article>.
2. Is it a themed or functional part of a larger page? Consider <section>, usually with a heading that introduces the group.
3. Is it simply a wrapper for grouping content, without a more specific meaning? Use <div>.

These distinctions follow MDN’s descriptions of the elements. [S1] A layout that looks like a card, box, or column does not, by itself, tell you which element to choose.

Assume the page contains a complete post, a heading followed by links on one topic, and an outer wrapper used only to group page content. One possible structure is:

<div class="page-layout">
  <article>
    <h2>Planning a small garden</h2>
    <p>A self-contained example post goes here.</p>
  </article>

  <section>
    <h2>More about garden planning</h2>
    <ul>
      <li><a href="#example">Example related link</a></li>
    </ul>
  </section>
</div>

Here, the post is treated as its own piece, the links form a themed group introduced by a heading, and the outer wrapper has no special content meaning. These are illustrative choices, not rules about how every page must be built. The definitions support the distinctions, but do not establish that this exact structure is right for every design. [S1]

Don’t add <section> just to make the markup seem more meaningful. First ask whether the chunk has a distinct theme or function within the page. MDN recommends introducing sections with a heading, so consider whether a heading would clearly introduce that group. [S1]

If the chunk is instead just a wrapper for layout or grouping, and neither <article> nor another meaningful element fits, use <div>. If the content is a standalone piece, <article> may fit. Select an element for the content’s purpose rather than adding semantic labels without a clear reason.

Use this short decision tree for each chunk:

1. Is it related content that makes sense on its own? If yes, consider <article>.
2. If not, does it group a themed or functional part of the page? If yes, consider <section> and introduce the group with a heading.
3. If neither meaning fits, do you still need to group elements? If yes, use <div>; if no, you may not need a wrapper at all.
4. Review the purpose: Can you explain why you chose that element without referring only to its appearance? If not, reconsider.

The first two questions follow MDN’s descriptions of <article> and <section>; its guidance reserves a generic <div> for grouping when no suitable semantic element fits. [S1] This is a practical review aid, not a substitute for judging the actual content.