🟠 Chapter 14: Quotations, Citations & Advanced Semantic Metadata

Combining Citations and Quotations in Practice

Master production-ready editorial architectures combining `<figure>`, `<blockquote>`, `<figcaption>`, `<cite>`, `<time>`, and `<address>`.

LEARNING OBJECTIVES ⌵

Master the industry-standard editorial quoting architecture pairing <figure>, <blockquote>, and <figcaption>.
Understand why placing attribution inside <figcaption> outside <blockquote> cleanly separates the speaker's words from citation metadata.
Synthesize all Chapter 14 semantic elements (<q>, <blockquote>, cite, <cite>, <time>, <data>, <dfn>, <bdi>, <address>) into a cohesive production article.
Implement responsive typographic styling using CSS custom properties, logical properties, and print stylesheets.
Structure accessible markup that generates rich semantic trees for search engines and assistive technologies.

🎬 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)

In premier digital publications (such as The Atlantic, MIT Technology Review, or The New Yorker), an editorial quotation is never just a raw paragraph with quotation marks.

An editorial quote is a self-contained journalistic figure:

The Core Quotation: The verbatim words spoken or written by the subject (<blockquote> or <q>).
The Attribution Caption: The person who spoke, their professional credentials, and the original title of the work (<figcaption> and <cite>).
Temporal Anchors: The exact moment the statement was published or spoken (<time>).
Machine-Readable Metadata: Direct canonical URLs and catalog identifiers (cite="..." and <data>).

┌─────────────────────────────────────────────────────────────────────────────┐
│                       THE PRODUCTION QUOTATION FIGURE                       │
├─────────────────────────────────────────────────────────────────────────────┤
│ <figure class="editorial-quote">                                            │
│   │                                                                         │
│   ├── <blockquote cite="https://canonical.source.org/paper.html">          │
│   │     <p>"The actual verbatim words spoken by the original author..."</p> │
│   │   </blockquote>                                                         │
│   │                                                                         │
│   └── <figcaption>                                                          │
│         — <bdi>Dr. Maya Lin</bdi>, in <cite>The Architecture of Light</cite>│
│         (<time datetime="2026-05-12">May 12, 2026</time>)                   │
│       </figcaption>                                                         │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘

By wrapping the quotation in a <figure> and its attribution in a <figcaption>, you achieve the cleanest architectural separation in HTML5: the <blockquote> contains only the quoted words, while the <figcaption> provides the contextual metadata.

Technical Deep Dive & Specifications

2.1 The Two Attribution Architectures in HTML5

There are two valid, spec-compliant patterns for attributing blockquotes in HTML5:

Pattern A: The `<figure>` + `<figcaption>` Pattern (Recommended for Editorial & Media)

<figure>
  <blockquote cite="https://example.com/source">
    <p>Words spoken by the author.</p>
  </blockquote>
  <figcaption>
    — Author Name, <cite>Title of Work</cite>
  </figcaption>
</figure>

Why this is preferred: Screen readers announce the figure and caption as a unified unit, while keeping the contents of <blockquote> strictly verbatim.

Pattern B: The `<blockquote>` + `<footer>` Pattern (Recommended for Self-Contained Cards)

<blockquote cite="https://example.com/source">
  <p>Words spoken by the author.</p>
  <footer>
    — Author Name, <cite>Title of Work</cite>
  </footer>
</blockquote>

Why this works: The WHATWG specification allows <footer> inside <blockquote> to represent attribution for the quote itself.

2.2 Semantic Element Checklist for Chapter 14

Element / Attribute	Semantic Responsibility	Best Practice Location
`<q>`	Short inline quotation	Inside body paragraphs (`<p>`)
`<blockquote>`	Extended multi-sentence quotation	Direct child of `<article>`, `<figure>`, or `<section>`
`cite="..."` (Attr)	Machine-readable source URL	On `<q>`, `<blockquote>`, `<ins>`, `<del>`
`<cite>` (Element)	Human-readable title of creative work	Inside `<figcaption>`, `<footer>`, or `<p>`
`<time>`	Temporal dates, timestamps, durations	Article headers, bylines, event dates
`<data>`	Machine-readable product SKUs/IDs	E-commerce items, catalog listings, measurements
`<dfn>`	Defining instance of a term	First introductory sentence of a definition
`<bdi>`	Bidirectional text isolation	Dynamic user comments, usernames, mixed scripts
`<address>`	Author/publisher contact info	Article footer or document-level footer

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL example.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Lines 84–88 (<header>): Combines <time datetime="..."> with ISO dates, ISO durations (PT4M), and a machine catalog number <data value="ART-2026-0849">.
Line 92 (<dfn id="def-hypertext">): Semantically anchors the defining instance of "hypertext".
Line 96 (<q lang="en" cite="...">): Integrates an inline quotation with automated quotes and a source URL.
Lines 100–111 (<figure class="quote-figure">): The gold-standard quotation figure: <blockquote> holds the clean quote text, while <figcaption> cleanly houses <bdi>, <cite>, <a>, and <time>.
Lines 118–124 (<address>): Positioned at the base of <article>, scoping Dr. Helena Vance’s contact info specifically to this article.

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">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Production Editorial Architecture</title>
  <style>
    :root {
      --primary: #2563eb;
      --accent: #0f766e;
      --surface: #ffffff;
      --bg: #f8fafc;
      --text: #0f172a;
      --text-muted: #64748b;
      --border: #e2e8f0;
    }

body {
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      line-height: 1.75;
      background-color: var(--bg);
      color: var(--text);
      padding: 2rem 1rem;
    }

.article-shell {
      background: var(--surface);
      max-width: 780px;
      margin: 0 auto;
      padding: 3rem 2.5rem;
      border-radius: 16px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    }

header h1 {
      font-size: 2.25rem;
      line-height: 1.25;
      color: #0f172a;
      margin-bottom: 0.5rem;
    }

.byline {
      font-size: 0.95rem;
      color: var(--text-muted);
      margin-bottom: 2rem;
      border-bottom: 1px solid var(--border);
      padding-bottom: 1rem;
    }

/* Editorial Figure Quote Component */
    .quote-figure {
      margin: 2.5rem 0;
      padding: 0;
      border-inline-start: 4px solid var(--primary);
      background: linear-gradient(to right, #eff6ff, #ffffff);
      border-radius: 0 12px 12px 0;
    }

.quote-figure blockquote {
      margin: 0;
      padding: 1.5rem 2rem 0.75rem 2rem;
    }

.quote-figure blockquote p {
      font-size: 1.2rem;
      font-style: italic;
      color: #1e3a8a;
      line-height: 1.6;
      margin: 0;
    }

.quote-figure figcaption {
      padding: 0.5rem 2rem 1.25rem 2rem;
      font-size: 0.9rem;
      color: var(--text-muted);
    }

.quote-figure cite {
      font-weight: 600;
      color: var(--text);
      font-style: normal;
    }

/* Definition styling */
    dfn {
      font-weight: 700;
      color: var(--accent);
      border-bottom: 1px dashed var(--accent);
    }

/* Author Contact Scoping */
    .author-footer {
      margin-top: 3rem;
      padding-top: 1.5rem;
      border-top: 2px solid var(--border);
      background: #f8fafc;
      padding: 1.5rem;
      border-radius: 8px;
    }

.author-footer address {
      font-style: normal;
      font-size: 0.95rem;
      color: var(--text-muted);
    }
  </style>
</head>
<body>

<article class="article-shell">
    <header>
      <h1>The Architecture of Human Knowledge</h1>
      <div class="byline">
        Published on <time datetime="2026-08-21T08:00:00Z">August 21, 2026</time> 
        • Read Time: <time datetime="PT4M">4 mins</time>
        • Article SKU: <data value="ART-2026-0849">#0849</data>
      </div>
    </header>

<p>
      In computing history, a <dfn id="def-hypertext">hypertext</dfn> system is text displayed on a computer display or other electronic devices with references (hyperlinks) to other text that the reader can immediately access.
    </p>

<p>
      As Ted Nelson reflected in his philosophical treatise: <q lang="en" cite="https://example.com/literary-machines">Everything is deeply intertwingled.</q>
    </p>

<figure class="quote-figure">
      <blockquote cite="https://www.w3.org/People/Berners-Lee/Weaving/">
        <p>
          "We need to be able to argue about things without burning the library down. The dream behind the Web is of a common information space in which we communicate by sharing information."
        </p>
      </blockquote>
      <figcaption>
        — <bdi>Sir Tim Berners-Lee</bdi>, from <cite><a href="https://www.w3.org/People/Berners-Lee/Weaving/" target="_blank" rel="noopener">Weaving the Web</a></cite> 
        (<time datetime="1999">1999</time>)
      </figcaption>
    </figure>

<p>
      Today, web standards enable billions of diverse users worldwide to contribute prose in every spoken language and script.
    </p>

<footer class="author-footer">
      <address>
        <strong>About the Author:</strong><br>
        Dr. Helena Vance, Senior Fellow at the Open Web Institute.<br>
        Inquiries: <a href="mailto:helena.vance@openweb.org">helena.vance@openweb.org</a>
      </address>
    </footer>
  </article>

</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

+-----------------------------------------------------------------------+
| The Architecture of Human Knowledge                                   |
| Published on August 21, 2026 • Read Time: 4 mins • Article SKU: #0849 |
| ───────────────────────────────────────────────────────────────────── |
|                                                                       |
| In computing history, a HYPERTEXT system is text displayed on a...    |
|                                                                       |
| As Ted Nelson reflected: “Everything is deeply intertwingled.”        |
|                                                                       |
| ▌ "We need to be able to argue about things without burning the       |
| ▌  library down. The dream behind the Web is of a common..."          |
| ▌                                                                     |
| ▌ — Sir Tim Berners-Lee, from Weaving the Web (1999)                  |
|                                                                       |
| Today, web standards enable billions of diverse users worldwide...    |
|                                                                       |
| About the Author:                                                     |
| Dr. Helena Vance, Senior Fellow at the Open Web Institute.            |
| Inquiries: [email protected]                                   |
+-----------------------------------------------------------------------+

🏋️ Hands-On Exercise

🎯 The Challenge: Architect the Journal of Computing History Article

You are tasked with engineering a production-grade academic article about computing pioneer Alan Turing.

Your Instructions:

Structure the document inside a semantic <article> with <header> and <footer>.
In the header byline, mark the publication date (2026-08-21) and reading duration (PT5M) with <time> elements.
In the text, introduce the defining instance of Turing Complete using <dfn id="def-turing-complete">.
Build an editorial <figure> containing:
- A <blockquote> with cite="https://doi.org/10.1093/mind/LIX.236.433".
- A <figcaption> citing Alan Turing, the work title <cite>Computing Machinery and Intelligence</cite>, and the publication year <time datetime="1950">1950</time>.
Include an article-scoped <address> in the footer with the contributor's email.

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Challenge: Journal Article Architecture</title>
  <style>
    body { font-family: sans-serif; padding: 2rem; }
    /* TODO: Add styles */
  </style>
</head>
<body>

<div>
    <h1>Alan Turing and the Foundations of AI</h1>
    <p>Published: August 21, 2026 | Read Time: 5 minutes</p>

<p>
      A system is Turing Complete if it can simulate any single-taped Turing machine regardless of memory limitations.
    </p>

<div style="border-left: 4px solid blue; padding-left: 10px;">
      "We may hope that machines will eventually compete with men in all purely intellectual fields."
      <p>- Alan Turing, Computing Machinery and Intelligence (1950)</p>
    </div>

<div>
      Curated by Dr. Marcus Sterling (m.sterling@computinghistory.org)
    </div>
  </div>

</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Solution: Validated Journal Article Architecture</title>
  <style>
    :root {
      --primary: #4338ca;
      --bg: #f8fafc;
      --card-bg: #ffffff;
      --text: #0f172a;
      --muted: #64748b;
    }

    body {
      font-family: system-ui, -apple-system, sans-serif;
      line-height: 1.7;
      background-color: var(--bg);
      color: var(--text);
      padding: 2rem;
    }

    .journal-article {
      background: var(--card-bg);
      max-width: 720px;
      margin: 0 auto;
      padding: 2.5rem;
      border-radius: 12px;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
    }

    .meta-bar {
      font-size: 0.9rem;
      color: var(--muted);
      margin-bottom: 1.5rem;
      border-bottom: 1px solid #e2e8f0;
      padding-bottom: 0.75rem;
    }

    .editorial-quote {
      margin: 2rem 0;
      border-left: 4px solid var(--primary);
      background: #eef2ff;
      border-radius: 0 8px 8px 0;
    }

    .editorial-quote blockquote {
      margin: 0;
      padding: 1.25rem 1.5rem 0.5rem 1.5rem;
    }

    .editorial-quote blockquote p {
      font-size: 1.15rem;
      font-style: italic;
      color: #1e1b4b;
      margin: 0;
    }

    .editorial-quote figcaption {
      padding: 0.5rem 1.5rem 1.25rem 1.5rem;
      font-size: 0.9rem;
      color: var(--muted);
    }

    dfn {
      font-weight: 700;
      color: var(--primary);
    }

    cite {
      font-weight: 600;
      color: var(--text);
      font-style: normal;
    }

    .article-footer {
      margin-top: 2.5rem;
      border-top: 1px solid #e2e8f0;
      padding-top: 1.25rem;
    }

    address {
      font-style: normal;
      font-size: 0.9rem;
      color: var(--muted);
    }
  </style>
</head>
<body>

  <article class="journal-article">
    <header>
      <h1>Alan Turing and the Foundations of AI</h1>
      <div class="meta-bar">
        Published: <time datetime="2026-08-21">August 21, 2026</time> | 
        Estimated Read: <time datetime="PT5M">5 minutes</time>
      </div>
    </header>

    <p>
      A computational system is considered <dfn id="def-turing-complete">Turing Complete</dfn> if it can simulate any single-taped Turing machine regardless of physical memory constraints.
    </p>

    <!-- Semantic Editorial Figure Quote -->
    <figure class="editorial-quote">
      <blockquote cite="https://doi.org/10.1093/mind/LIX.236.433">
        <p>
          "We may hope that machines will eventually compete with men in all purely intellectual fields."
        </p>
      </blockquote>
      <figcaption>
        — Alan Turing, in <cite>Computing Machinery and Intelligence</cite> (<time datetime="1950">1950</time>)
      </figcaption>
    </figure>

    <p>
      Turing anticipated machine learning decades before digital electronic computers possessed the memory capacity to implement neural network models.
    </p>

    <footer class="article-footer">
      <address>
        Curated by <strong>Dr. Marcus Sterling</strong><br>
        Email: <a href="mailto:[email protected]">[email protected]</a>
      </address>
    </footer>
  </article>

</body>
</html>

Why this works:

Full Architectural Synthesis: Integrates <article>, <header>, <figure>, <blockquote>, <figcaption>, <cite>, <time>, <dfn>, and <address>.
Accessible Tree Structure: Assistive technologies announce every element with its native semantic role without requiring redundant ARIA attributes.

⚠️ Common Pitfalls

Putting Attribution Inside the Quote: Writing <blockquote cite="...">"Quote" - By Author</blockquote> pollutes the quotation text. Use <figcaption> or a nested <footer> to hold the citation.
Forgetting ISO Formats on Times: Displaying human text in <time> without datetime="..." prevents search engines from indexing the timestamp.
Wrapping Author Names in <cite>: Never write <cite>Alan Turing</cite>. Reserve <cite> strictly for the title of the work (Computing Machinery and Intelligence).

💡 Pro Tips

CSS text-wrap: balance on Pull Quotes: Apply text-wrap: balance; on headings and pull-quote paragraphs to make the browser automatically balance multi-line quotes into visually harmonious typography.

JSON-LD Schema.org Quotation Integration: Supplement your HTML figure with JSON-LD for rich Google knowledge graphs:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Quotation",
  "creator": "Alan Turing",
  "text": "We may hope that machines will eventually compete with men in all purely intellectual fields.",
  "citation": "https://doi.org/10.1093/mind/LIX.236.433"
}
</script>

📌 Key Takeaways

The <figure> + <blockquote> + <figcaption> pattern is the industry standard for production editorial quotations.
<blockquote> holds the verbatim words; <figcaption> houses the attribution metadata.
Pair <cite> (titles of works) with <time> (publication dates) and <a> (source hyperlinks).
Scoped <address> tags in <article> identify the author, while global <address> in <footer> identifies the site publisher.
Use <dfn> to mark defining terms, <bdi> for multilingual text isolation, and <data> for machine-readable SKUs.
--

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

? Question 1 / 3

Why is pairing `<figure>`, `<blockquote>`, and `<figcaption>` considered superior to putting the attribution text directly inside `<p>` within `<blockquote>`?

Topic: HTML Fundamentals

? Question 2 / 3

In the markup `<figcaption>— Dr. Jane Goodall, <cite>In the Shadow of Man</cite></figcaption>`, which part is correctly placed inside the `<cite>` element?

Topic: HTML Fundamentals

? Question 3 / 3

Which HTML element should be used in an article header to mark that an article takes 5 minutes to read?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

2.1 The Two Attribution Architectures in HTML5

Pattern A: The <figure> + <figcaption> Pattern (Recommended for Editorial & Media)

Pattern B: The <blockquote> + <footer> Pattern (Recommended for Self-Contained Cards)

2.2 Semantic Element Checklist for Chapter 14

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Architect the Journal of Computing History Article

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

Why is pairing <figure>, <blockquote>, and <figcaption> considered superior to putting the attribution text directly inside <p> within <blockquote>?

In the markup <figcaption>— Dr. Jane Goodall, <cite>In the Shadow of Man</cite></figcaption>, which part is correctly placed inside the <cite> element?

Which HTML element should be used in an article header to mark that an article takes 5 minutes to read?

Pattern A: The `<figure>` + `<figcaption>` Pattern (Recommended for Editorial & Media)

Pattern B: The `<blockquote>` + `<footer>` Pattern (Recommended for Self-Contained Cards)

Why is pairing `<figure>`, `<blockquote>`, and `<figcaption>` considered superior to putting the attribution text directly inside `<p>` within `<blockquote>`?

In the markup `<figcaption>— Dr. Jane Goodall, <cite>In the Shadow of Man</cite></figcaption>`, which part is correctly placed inside the `<cite>` element?