🏗 Phase 6 · Semantic HTML🟢 BeginnerModule 07

Article & Section

⏱ 17 min read📖 4 sections🧩 5-question quiz

Course Progress71% complete

<article> and <section> are the two most misused semantic elements. They're both block containers, both accept headings, and both can nest inside each other — yet they have distinct, specific meanings. This lesson pins down exactly when to use each, how to nest them correctly, and introduces <figure> and <figcaption> for self-contained media content.

Section 1

article — 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 complete sense on its own? If yes, use <article>. Blog posts, news articles, forum posts, product cards, comment items, and widget components all qualify.

✗ div soup

<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>
</div>

✓ semantic

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

A comment section is a classic pattern that trips people up — each individual comment is an <article> nested inside a parent <article> (the post itself):

HTMLNested articles — post with comments

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

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

    <article>          <!-- Individual comment -->
      <header>
        <strong>Alice</strong>
        <time datetime="2025-06-15T09:00">June 15</time>
      </header>
      <p>Great post!</p>
    </article>

    <article>          <!-- Another comment -->
      <header>
        <strong>Bob</strong>
        <time datetime="2025-06-16T14:30">June 16</time>
      </header>
      <p>Very helpful, thanks!</p>
    </article>
  </section>
</article>

Section 2

section — 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 heading. If you'd feel awkward giving it an <h2>, it probably shouldn't be a <section> — use a <div> instead.

Use section for…	Use div for…
A "Features" section on a landing page	A flex wrapper around cards
A "Reviews" section on a product page	A centering container
Chapters of a long article	A JS hook container (id="modal-root")
The "Comments" block at the end of a post	A visually styled box with no distinct content meaning

HTMLSections within a landing page

<main>
  <section id="features">
    <h2>Features</h2>
    <div class="cards-grid">   <!-- div — just layout -->
      <article class="feature-card">...</article>
    </div>
  </section>

  <section id="pricing">
    <h2>Pricing</h2>
    <p>Plans for every team size...</p>
  </section>

  <section id="testimonials">
    <h2>What customers say</h2>
    <!-- each review is self-contained → article -->
    <article>...</article>
    <article>...</article>
  </section>
</main>

⚠️

section is not a styled box

<section> is one of the most over-used elements. A background-colored stripe on a landing page that just holds a heading and some cards is tempting to wrap in <section>, but if it has no special heading hierarchy meaning, a <div> is correct. Semantic elements carry meaning — don't use them just because they sound more "professional."

Section 3

article vs section — The Decision Tree

These two questions decide which element to use:

Could this content make sense on its own, outside this page?

Yes → <article> (blog post, comment, product card, forum reply)

No → Does this content form a distinct thematic group with its own heading?

Yes → <section> (features, pricing, comments list, chapters)

No → Is it a generic layout container or JS hook?

Yes → <div> (flex wrapper, grid container, modal root)

Inline? → <span>

One key nuance: <article> and <section> can each contain the other. A blog post (<article>) can have <section> chapters inside it. A comments <section> can contain individual comment <article> elements.

🔖

The heading outline rule

Each <section> and <article> starts a new heading context. The first heading inside should be the most important one in that context (<h1> inside an <article> doesn't conflict with the page's <h1>). In practice, most developers start sections with <h2> and subsections with <h3> to stay safe across all assistive technologies.

Section 4

figure & 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, charts, diagrams, audio, and video. <figcaption> provides its caption.

🖼️

Figure 1. CSS Grid layout with three columns and auto-fill rows.

📊

Figure 2. Monthly visitors by channel, Q1 2025.

💻

Listing 1. Grid container with named template areas.

HTMLfigure and figcaption patterns

<!-- Image with caption -->
<figure>
  <img src="grid-diagram.png"
       alt="CSS Grid with 3 columns labeled A, B, and C">
  <figcaption>
    Figure 1. A basic three-column CSS Grid layout.
  </figcaption>
</figure>

<!-- Code listing with caption -->
<figure>
  <pre><code>
    .container { display: grid; }
  </code></pre>
  <figcaption>Listing 1. Minimal grid container.</figcaption>
</figure>

<!-- figcaption can go before OR after the content -->
<figure>
  <figcaption>Before the image is valid too</figcaption>
  <img src="photo.jpg" alt="...">
</figure>

💡

alt vs figcaption — they're not the same

alt is a text replacement for the image when it cannot be displayed. <figcaption> is a visible description visible to everyone. An image of a chart might have alt="Bar chart showing 3 columns" (describes what the image is) and a <figcaption> of "Figure 2. Monthly visitors by channel" (gives context for why it's shown here). Both should be present when the image carries information.

🏆

Module 7 Complete!

You've finished all four Semantic HTML lessons: semantic elements, header & footer, nav/main/aside, and article & section. You now write HTML that is structurally meaningful — not just visually correct.

Up next: Module 8 — Media & Embeds. Audio, video, iframes, and SVG.

Start Module 8 →Course Home

🧩 Quick Check — Lesson 25

5 questions · instant feedback

1. What is the key test for whether to use <article> vs <section>?

2. Every <section> element should have a ___.

3. A blog post contains a comments block. The comments block is a <section>. Each individual comment should be which element?

4. What is the difference between the alt attribute and <figcaption>?

5. A landing page has a visually distinct stripe with a heading "Our Features" and feature cards inside. Which element wraps the stripe?

🏆

Module 7 Complete!

article, section, figure, and figcaption locked in. Ready for Module 8: Media & Embeds!

🏆

Lesson 25 Challenge

Build exercise · 25 min

Build a news index page with full semantic structure.

The page should contain:
- A <main> with two sections: "Latest News" and "Opinion"
- "Latest News" section: 3 article elements, each with a header (h2 title + time element), a paragraph summary, a figure with an img+figcaption, and a footer with "Read more" link
- "Opinion" section: 2 article elements structured the same way
- Each article's figure should use a placeholder image (e.g., via.placeholder.com or a local image) with a meaningful alt text and a descriptive figcaption
- One of the "Latest News" articles should have a nested section inside it titled "Key takeaways" with a list of 3 bullet points
- A sidebar aside with "Editor's Picks" (list of 4 links)

Bonus: add CSS to lay out main as a 2-column grid (articles column + aside column) and style the figure images as rounded thumbnails.

Show hints

Feature cards (article inside section) are very common; this challenge mirrors real news site structure
<figure> inside <article> is perfectly valid nesting
The "Key takeaways" subsection inside an article uses <section> with <h3>Key takeaways</h3>
Grid layout: main { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; }
figcaption text color is typically muted — try color: #888 and font-size: 0.85rem

← Nav, Main & Aside

Lesson 25 of 35

Audio →