HTML · Quick Reference

Lesson 25 — Article & Section Cheat Sheet

HTML

In one line: The test for <article>: could this content be pulled out and published somewhere else — a feed reader, a social card, a syndication partner — and still make complete sense...

Key Ideas

1article — Self-Contained & Redistributable. The test for <article>: could this content be pulled out and published somewhere else — a feed reader, a social card, a syndication partner — and still make comp...

2section — Thematic Grouping. <section> groups content that is thematically related but isn't self-contained enough to syndicate on its own. The rule: every <section> must have a headin...

3article vs section — The Decision Tree. These two questions decide which element to use:

4figure & figcaption — Captioned Media. <figure> wraps any self-contained content that is referenced from the main flow but could be moved without breaking reading continuity — images, code listings, c...

Code Examples

<div class="post">
  <div class="post-head">
    <h2>How CSS Grid Works</h2>
    <div class="meta">June 2025</div>
  </div>
  <div class="post-body">
    <p>Content...</p>
  </div>
&l...

<article>
  <header>
    <h2>How CSS Grid Works</h2>
    <time datetime="2025-06-01">
      June 2025
    </time>
  </header>
  <p>Content...</p>
</article>

<article>              <!-- The main post -->
  <h1>My Blog Post</h1>
  <p>Post content...</p>

  <section>            <!-- Comments section -->
    <h2>Comments (3)</h2>

    <article>...