📑 Chapter 39: Content Sectioning & Advanced Semantic Architecture

figure and figcaption for Self-Contained Content

Encapsulating self-contained media, code snippets, statistical tables, quotes, and architectural diagrams.

LEARNING OBJECTIVES ⌵

Master the semantic definition of the <figure> element as self-contained, relocatable content.
Apply <figcaption> correctly as either the first or last child of a <figure> element.
Structure diverse media within <figure>: images, code listings (<pre><code>), statistical tables, and blockquotes.
Understand how screen readers calculate accessible names for the figure landmark role from <figcaption>.

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Think of a scientific textbook on aerospace engineering.

While reading a chapter on rocket propulsion, the main body text says:

"The combustion chamber experiences extreme thermal gradients during the ignition sequence (see Figure 4.2). As the liquid hydrogen enters..."

Now imagine the graphic layout artist needs to move Figure 4.2 (the diagram of the engine nozzle with its caption) to the top of the next page, to a side callout column, or into an appendix at the end of the chapter. Does the chapter still make complete grammatical and logical sense? Yes.

MAIN FLOW DOCUMENT                             RELOCATABLE SELF-CONTAINED FIGURE
+------------------------------------+         +------------------------------------+
| The combustion chamber experiences |         | <figure>                           |
| extreme thermal gradients during   |         |   <img src="engine-nozzle.svg"     |
| ignition (see Figure 4.2).         |         |        alt="Cross-section nozzle"> |
|                                    | =====>  |   <figcaption>                     |
| As the liquid hydrogen enters the  |         |     Figure 4.2: Cryogenic cooling  |
| manifold, heat exchange occurs...  |         |     channel cross-section.         |
+------------------------------------+         |   </figcaption>                    |
                                               | </figure>                          |
                                               +------------------------------------+

A <figure> is self-contained content that is referenced as a single unit from the main flow. If you lift it out of its position and move it elsewhere, the linear text flow remains intact.

Technical Deep Dive & Specifications

The Five Real-World Permutations of `<figure>`

Many developers assume <figure> is only for photographs. The HTML Living Standard explicitly intends <figure> for any self-contained content unit:

+---------------------------------------------------------------------------------------------------+
|                                 DIVERSE USE CASES FOR <figure>                                    |
+---------------------------------------------------------------------------------------------------+
| 1. Media Assets: Photos, SVG diagrams, infographics, audio clips, video players.                  |
| 2. Code Listings: <pre><code> snippets referenced by "Listing 3.1: Config file".                 |
| 3. Statistical Tables: <table> datasets referenced by "Table 2: Q3 Revenue Breakdown".            |
| 4. Formal Blockquotes: <blockquote> quotes referenced by "Quote 1: Dijkstra on Simplicity".        |
| 5. Mathematical Equations & Poems: Multi-line formulas or stanzas referenced as distinct units.   |
+---------------------------------------------------------------------------------------------------+

Strict Syntax & Content Model Rules

Rule	Specification Requirement	Valid / Invalid Example
Placement of `<figcaption>`	Must be either the first child or last child of `<figure>`.	✅ `<figure><figcaption>...</figcaption><img ...></figure>` ❌ `<figure><p>Text</p><figcaption>...</figcaption><p>More</p></figure>`
Quantity of `<figcaption>`	At most one `<figcaption>` per `<figure>`.	✅ 1 `<figcaption>` per figure ❌ Multiple `<figcaption>` tags in one figure
Multiple Media Items	Allowed. Multiple images can share a single caption.	✅ `<figure><img ...><img ...><figcaption>Comparison</figcaption></figure>`
Self-Contained Requirement	Content must be capable of moving to an appendix without breaking narrative flow.	✅ Diagram referenced via "Figure 1" ❌ Decorative icon inline within a paragraph

+-----------------------------------------------------------------------------+
|               VALID STRUCTURE A (Caption First)                             |
| <figure>                                                                    |
|   <figcaption>Listing 1: Nginx Reverse Proxy Config</figcaption>            |
|   <pre><code>proxy_pass http://upstream_cluster;</code></pre>               |
| </figure>                                                                   |
+-----------------------------------------------------------------------------+
|               VALID STRUCTURE B (Caption Last)                              |
| <figure>                                                                    |
|   <img src="chart.png" alt="Bar chart showing 40% query latency drop">     |
|   <figcaption>Figure 8: Post-migration latency distribution</figcaption>    |
| </figure>                                                                   |
+-----------------------------------------------------------------------------+

Accessibility Tree Mapping & Screen Reader Support

<figure> maps to the ARIA role figure.
When <figcaption> is present, browsers automatically compute the figure's accessible name from the <figcaption> text (equivalent to aria-labelledby).
When a screen reader user navigates to the element, it announces: "Figure, Figure 8: Post-migration latency distribution".

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Line 46 (<figure class="code-listing">): Encapsulates the YAML configuration as a self-contained figure unit.
Line 47–51 (<pre><code>...</code></pre>): Semantic markup for preformatted code.
Line 52 (<figcaption>Listing 1: ...</figcaption>): Caption placed as the last child of the figure, naming the listing for readers and assistive technologies.
Line 59 (<figure>): Encapsulates the statistical data table.
Line 60–70 (<table>...</table>): Standard tabular data.
Line 71 (<figcaption>Table 1: ...</figcaption>): Links the tabular data to the narrative reference "detailed in Table 1 below".

Expected Browser Render Output

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Engineering Architecture Whitepaper</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.6; max-width: 800px; margin: 2rem auto; color: #1e293b; }
    
    /* Elegant Figure Styling */
    figure {
      margin: 2rem 0;
      padding: 1.25rem;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
    }
    figure.code-listing {
      background: #0f172a;
      color: #f8fafc;
      border: none;
    }
    figure.code-listing pre {
      margin: 0;
      overflow-x: auto;
      font-family: "Fira Code", monospace;
      font-size: 0.9rem;
      color: #38bdf8;
    }
    figcaption {
      font-size: 0.875rem;
      font-weight: 600;
      color: #64748b;
      margin-top: 0.75rem;
      border-top: 1px solid #e2e8f0;
      padding-top: 0.5rem;
    }
    figure.code-listing figcaption {
      color: #94a3b8;
      border-top: 1px solid #334155;
    }
    table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
    th, td { border: 1px solid #cbd5e1; padding: 0.5rem 0.75rem; text-align: left; }
    th { background: #e2e8f0; }
  </style>
</head>
<body>

<article>
    <h1>Database Replication Topologies</h1>
    <p>
      When deploying across multi-region availability zones, synchronous replication guarantees zero data loss (see Listing 1 for connection pool configuration).
    </p>

<figure class="code-listing">
      <pre><code>pool_config:
  max_open_conns: 100
  max_idle_conns: 25
  conn_max_lifetime: 5m
  ssl_mode: require_secure</code></pre>
      <figcaption>Listing 1: Production database pool configuration yaml</figcaption>
    </figure>

<p>
      Benchmark results across 50,000 concurrent write operations are detailed in Table 1 below.
    </p>

<figure>
      <table>
        <thead>
          <tr><th>Replication Mode</th><th>P50 Latency</th><th>P99 Latency</th><th>Data Loss Risk</th></tr>
        </thead>
        <tbody>
          <tr><td>Asynchronous</td><td>1.2 ms</td><td>4.8 ms</td><td>Non-Zero</td></tr>
          <tr><td>Semi-Synchronous</td><td>4.5 ms</td><td>12.1 ms</td><td>Bounded</td></tr>
          <tr><td>Full Synchronous (Raft)</td><td>8.9 ms</td><td>18.4 ms</td><td>Zero (RPO=0)</td></tr>
        </tbody>
      </table>
      <figcaption>Table 1: Replication latency benchmarks across 3 AWS regions</figcaption>
    </figure>
  </article>

</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

Database Replication Topologies
When deploying across multi-region availability zones, synchronous replication guarantees...

+-------------------------------------------------------------------+
| pool_config:                                                      |
|   max_open_conns: 100                                             |
|   max_idle_conns: 25                                              |
|   conn_max_lifetime: 5m                                           |
|   ssl_mode: require_secure                                        |
| ----------------------------------------------------------------- |
| Listing 1: Production database pool configuration yaml            |
+-------------------------------------------------------------------+

Benchmark results across 50,000 concurrent write operations are detailed in Table 1 below.

+-------------------------------------------------------------------+
| Replication Mode        | P50 Latency | P99 Latency | Data Loss   |
| Asynchronous            | 1.2 ms      | 4.8 ms      | Non-Zero    |
| Semi-Synchronous        | 4.5 ms      | 12.1 ms     | Bounded     |
| Full Synchronous (Raft) | 8.9 ms      | 18.4 ms     | Zero (RPO=0)|
| ----------------------------------------------------------------- |
| Table 1: Replication latency benchmarks across 3 AWS regions      |
+-------------------------------------------------------------------+

🏋️ Hands-On Exercise

🎯 The Challenge: Build a Multi-Image Architecture Comparison Figure

Instructions:

Create a single <figure> containing two architecture diagram images side-by-side: monolith.svg and microservices.svg.
Include a single <figcaption> placed as the first child of the <figure>.
The caption should read: "Figure 3: Transition from Monolithic MVC to Event-Driven Microservices Architecture."
Ensure both images have comprehensive alt attributes explaining their visual contents.

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Architecture Migration</title>
  <style>
    figure.comparison-grid {
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 1.5rem;
      background: #f8fafc;
      max-width: 850px;
      margin: 2rem auto;
    }
    figure.comparison-grid figcaption {
      font-weight: 700;
      font-size: 1rem;
      color: #0f172a;
      margin-bottom: 1rem;
      border-bottom: 1px solid #cbd5e1;
      padding-bottom: 0.5rem;
    }
    .image-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }
    .image-row img {
      width: 100%;
      height: auto;
      border-radius: 4px;
      border: 1px solid #e2e8f0;
      background: white;
    }
  </style>
</head>
<body>

  <main>
    <figure class="comparison-grid">
      <!-- Caption as FIRST child -->
      <figcaption>Figure 3: Transition from Monolithic MVC to Event-Driven Microservices Architecture.</figcaption>

      <div class="image-row">
        <img src="monolith.svg" alt="Diagram of monolithic architecture where UI, business logic, and database layer reside in a single deployable artifact.">
        <img src="microservices.svg" alt="Diagram of microservices architecture where services communicate asynchronously over Apache Kafka event bus.">
      </div>
    </figure>
  </main>

</body>
</html>

Why this works:

Placing <figcaption> as the first child immediately establishes the accessible name for assistive technology before reading the image descriptions.
Grouping multiple images inside a single <figure> establishes a semantic relationship: both diagrams together form the comparative entity referenced by "Figure 3".

⚠️ Common Pitfalls

Placing <figcaption> in the Middle: Placing <figcaption> between two images or between text paragraphs. The specification strictly allows <figcaption> to be ONLY the first child or last child of <figure>.
Using <figure> for Purely Decorative Images: Wrapping hero background banners or small UI icons in <figure>. Decorative images belong in CSS or standard <img> tags with alt="". <figure> is exclusively for self-contained reference units.
Redundant Alt Text Matching Caption Exactly: Setting alt="Figure 1: Rocket engine" on the image when <figcaption>Figure 1: Rocket engine</figcaption> is already present. Screen readers will read the exact same sentence twice in a row. Instead, use alt to describe the visual details and <figcaption> to provide the editorial label.

💡 Pro Tips

Printing & Academic CSS Pagination: CSS paged media rules (break-inside: avoid;) work seamlessly with <figure>, ensuring diagrams or code snippets are never awkwardly split across two physical pages when exported to PDF:
```
@media print {
  figure {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}
```

Blockquotes with Attribution: When creating formal pull quotes, pair <blockquote> inside <figure> and place the author citation inside <figcaption>:

<figure>
  <blockquote>
    <p>"Simplicity is prerequisite for reliability."</p>
  </blockquote>
  <figcaption>— Edsger W. Dijkstra, <cite>Selected Writings on Computing</cite></figcaption>
</figure>

📌 Key Takeaways

<figure> represents self-contained content referenced from the main flow that could be relocated without disrupting meaning.
<figure> supports diverse content: images, code snippets (<pre><code>), tables, blockquotes, and diagrams.
<figcaption> must be placed as either the first child or last child of the <figure>.
Only one <figcaption> is permitted per <figure>, but multiple media items may be grouped under that single caption.
Assistive technologies derive the accessible name of the figure landmark directly from the <figcaption>.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

Where may a `<figcaption>` element be legally positioned within a `<figure>` according to the WHATWG specification?

Topic: HTML Fundamentals

? Question 2 / 3

Why is it an accessibility anti-pattern to set an image's `alt` attribute to the exact duplicate text of the `<figcaption>`?

Topic: HTML Fundamentals

? Question 3 / 3

Which of the following content types is valid inside a `<figure>` element?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

The Five Real-World Permutations of <figure>

Strict Syntax & Content Model Rules

Accessibility Tree Mapping & Screen Reader Support

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Build a Multi-Image Architecture Comparison Figure

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

Where may a <figcaption> element be legally positioned within a <figure> according to the WHATWG specification?

Why is it an accessibility anti-pattern to set an image's alt attribute to the exact duplicate text of the <figcaption>?

Which of the following content types is valid inside a <figure> element?

The Five Real-World Permutations of `<figure>`

Where may a `<figcaption>` element be legally positioned within a `<figure>` according to the WHATWG specification?

Why is it an accessibility anti-pattern to set an image's `alt` attribute to the exact duplicate text of the `<figcaption>`?

Which of the following content types is valid inside a `<figure>` element?