🔣 Chapter 13: HTML Entities & Character References

Typographic Characters & Microtypography

Mastering the Em dash (—), En dash (–), horizontal ellipsis (…), curly smart quotes (“ ” ‘ ’), bullets (•), primes, and legal section marks (§).

LEARNING OBJECTIVES ⌵
  • Differentiate strictly between hyphens (-), En dashes (–), Em dashes (—), and true minus signs (−).
  • Implement curly "smart" quotation marks (“, ”, ‘, ’) for editorial typography.
  • Use the single-glyph horizontal ellipsis entity (…) to prevent awkward line wrapping in truncated text.
  • Format legal references (§, ¶) and academic footnotes (†, ‡, ′, ″).
🎬 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 1868, Christopher Latham Sholes invented the mechanical typewriter. To fit all parts onto a mechanical keyboard, dozens of distinct typographic symbols were eliminated. Typesetters were forced to use a single straight hyphen (-) for negative numbers, hyphenated words, date ranges, and sentence breaks (--). They used straight vertical quotes (") for both opening quotes, closing quotes, apostrophes, and inch symbols.

       TYPEWRITER HACKS (Crude)                      EXECUTIVE EDITORIAL TYPOGRAPHY
+------------------------------------------+  +-------------------------------------------------+
| Range: 1990 - 2026                       |  | Range: 1990–2026  (1990–2026)             |
| Break: Speed -- not size -- matters      |  | Break: Speed—not size—matters (—)   |
| Ellipsis: Loading...                     |  | Ellipsis: Loading…  (Loading…)           |
| Quotes: "Hello World"                    |  | Quotes: “Hello World”  (“Hello”)    |
| Height: 6' 2"                            |  | Height: 6′ 2″  (6′ 2″)              |
+------------------------------------------+  +-------------------------------------------------+

Today, premium digital design systems (such as those at Apple, The New York Times, and Stripe) do not use crude typewriter approximations. They utilize microtypography—the subtle art of using the exact typographical entity for every punctuation mark.

Technical Deep Dive & Specifications

Typographic Entity Reference Master Matrix

Typographic Element Glyph Named Entity Hex NCR Decimal NCR Primary Editorial Rule
Hyphen - (Literal) - - Compound words (state-of-the-art).
En Dash – – – – Numerical / date / time ranges (pages 10–25, 2024–2026).
Em Dash — — — — Thought breaks / parenthetical pauses (Design—fast and simple—won).
Minus Sign − − − − Mathematical subtraction and negative values (−5°C).
Horizontal Ellipsis … … … … Omission of text or asynchronous loading states (single unbreakable glyph).
Left Double Quote “ “ “ “ Opening curly double quote.
Right Double Quote ” ” ” ” Closing curly double quote.
Left Single Quote ‘ ‘ ‘ ‘ Opening curly single quote.
Right Single Quote / Apostrophe ’ ’ ’ ’ Closing single quote and true grammatical apostrophe (don’t).
Bullet • • • • Inline item delimiter and list markers.
Prime ′ ′ ′ ′ Feet / arcminutes / derivatives (f′(x)).
Double Prime ″ ″ ″ ″ Inches / arcseconds / second derivatives (f″(x)).
Section Sign § § § § Legal statute / clause citation (§ 102).
Pilcrow (Paragraph) ¶ ¶ ¶ Legal paragraph reference.
Dagger / Obelisk † † † † Primary academic footnote marker.
Double Dagger ‡ ‡ ‡ ‡ Secondary academic footnote marker.

The Three Dash Taxonomy: Hyphen vs En Dash vs Em Dash

- (Hyphen: Width of '-' key)        ==> Used to join words: "high-performance system"
– (En Dash: Width of letter 'N')    ==> Used for spans & ranges: "May 10–14", "pp. 120–135"
— (Em Dash: Width of letter 'M')    ==> Used for narrative breaks: "The engine—built in 2026—failed"

International Spacing Conventions for Em Dashes:

  • US / Chicago Manual of Style: Unspaced Em dash (word—word).
  • UK / Oxford Style Guide: Spaced En dash (word – word) or thin-spaced Em dash (word — word).

Why … is Superior to Three Typed Dots (...)

When you type three consecutive periods (...), the browser's rendering engine treats each period as an individual punctuation token. If the text hits the end of a line, the browser may split the dots across two lines:

       THREE TYPED PERIODS SPLIT                  SINGLE ELLIPSIS ENTITY
+------------------------------------+  +------------------------------------+
| Searching for database clusters.   |  | Searching for database             |
| ..                                 |  | clusters… (clusters…)       |
+------------------------------------+  +------------------------------------+
  Broken across lines                     Stays permanently glued together

Using … (…) guarantees that the three dots exist as a single, unbreakable typographic ligature with mathematically balanced letter-spacing.

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

  • Line 20 (Alexandra Chen • Updated Oct 12–14, 2026): Uses • (•) as an inline metadata separator and – (–) for the date span Oct 12–14.
  • Line 24 (afterthought—it is): Uses unspaced — (—) for the parenthetical thought transition.
  • Line 24 (§ 4.2): Formats the legal section mark (§) separated from the clause number by a thin space ( ).
  • Line 28 (“...”): Wraps the quote in typographic curly smart quotes (“ and ”).
  • Line 32 (−42%): Uses the true mathematical minus sign (−) rather than a short hyphen (-).
  • Line 32 (Don’t): Uses the typographic right single quote / curly apostrophe (’) in Don’t.
  • Line 32 (yet…”): Concludes with the horizontal ellipsis entity (…) followed by the closing smart quote.
  • Line 36 (13″): Uses double prime (″) for inches and single prime (′) for feet.
  • Line 40–41 († and ‡): Uses dagger (†) and double dagger (‡) for academic footnotes.

Expected Browser Render Output

SYS: ACTIVE
HULL: 98%
CORE: STABLE
NET: ONLINE
HTML STARSHIP CODE TERMINAL playground.html
root@STARSHIP-ALPHA:~/web-core# READY FOR COMPILATION █
LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C
INSPECTING DOM: VALID
TAGS: SCANNING...
The Architecture of Speed
Published by Alexandra Chen • Updated Oct 12–14, 2026 • 5 min read

In modern web systems, performance is not an afterthought—it is the fundamental architectural constraint. As stated in § 4.2 of the engineering charter, every millisecond counts.

“Simplicity is prerequisite for reliability—and speed is its natural consequence.”

During the benchmark test, the server load dropped by −42% while processing items 1–500. The engineer shouted, “Don’t restart the worker daemon yet…”

The display screen measures exactly 13″ diagonally with a physical depth of 0′ 0.5″.

---------------------------------------------------------
† Data collected across 10,000 synthetic benchmark cycles.
‡ Compliance verified under ISO/IEC standard § 9001–3.

🏋️ Hands-On Exercise

🎯 The Challenge: Refactor Typewriter Text to Master Typography

Instructions:

  1. Take the following unrefined typewriter press release text and refactor all punctuation using proper HTML entities:
    • Header: "Acme Corp Press Release (2024 - 2026)" $\rightarrow$ Use En dash (–).
    • Body sentence: "Our mission -- deliver speed -- has succeeded." $\rightarrow$ Use Em dash (—).
    • Quote: "We didn't compromise on quality," said the CEO. $\rightarrow$ Use smart quotes (“, ”) and curly apostrophe (’).
    • Sentence continuation: "Next phase loading..." $\rightarrow$ Use ellipsis (…).
    • Temperature metric: "-15 degrees" $\rightarrow$ Use minus sign (−) and degree symbol (°).
    • Legal footnote: "Subject to Section 12" $\rightarrow$ Use section entity (§).

🏁 Starter Code Sandbox

SYS: ACTIVE
HULL: 98%
CORE: STABLE
NET: ONLINE
STARTER CODE SANDBOX exercise.html
root@STARSHIP-ALPHA:~/web-core# READY FOR COMPILATION █
LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C
INSPECTING DOM: VALID
TAGS: SCANNING...

⚠️ Common Pitfalls

  1. Using Hyphen - for Minus Signs: Writing -10°C. A hyphen is short and sits low; a true minus sign (− $\rightarrow$ −) has the exact same width and vertical height as a plus sign (+).
  2. Typing Three Periods ... for Ellipses: Three dots will wrap separately across responsive lines if line limits occur between dots. Always use ….
  3. Using Straight Quotes " in Editorial Design: Straight quotes are code delimiters. Editorial copy should use curly smart quotes (“ and ”).
  4. Using Em Dash for Ranges: Writing May—July 2026. Date and numeric ranges strictly require the En Dash (May–July 2026).

💡 Pro Tips

  1. Automatic Smart Quotes with CSS <q>: Use the HTML <q> tag with CSS quotes for automated, language-sensitive quotation marks:
    q { quotes: "“" "”" "‘" "’"; }
  2. OpenType Feature Flags: Enable true typographic ligatures and contextual alternates in modern CSS using:
    body {
  font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
  text-rendering: optimizeLegibility;
}

📌 Key Takeaways

  • Use &ndash; (–) for number, date, and page ranges (2024–2026).
  • Use &mdash; (—) for parenthetical pauses and thought interruptions.
  • Use &hellip; (…), never three individual period dots, for text truncation.
  • Use &ldquo; / &rdquo; for double curly quotes and &rsquo; for true grammatical apostrophes (don’t).
  • Use &minus; ($-$) for mathematics and negative numbers, never the text hyphen.
  • --
⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE
3x
STREAK!
BONUS ACTIVE
COMBO
? Question 1 / 3

Which character entity should be used when specifying a range of dates, such as "January 15 to January 20"?

Question 1 / 3 Topic: HTML Fundamentals
00:45 REMAINING
XP REWARD
+250 XP
3x
STREAK!
BONUS ACTIVE
COMBO
? Question 2 / 3

Why is &hellip; preferred over typing three consecutive periods (...) on a keyboard?

Question 2 / 3 Topic: HTML Fundamentals
00:45 REMAINING
XP REWARD
+250 XP
3x
STREAK!
BONUS ACTIVE
COMBO
? Question 3 / 3

Which named entity produces the correct typographic curly apostrophe in the word "it’s"?

Question 3 / 3 Topic: HTML Fundamentals
00:45 REMAINING
XP REWARD
+250 XP