Character encoding and HTML entities

Part 2 introduced <meta charset="UTF-8" /> briefly. This part explains what it actually does, and covers HTML entities — the escape sequences that represent characters HTML itself needs to reserve for markup syntax.

What <meta charset="UTF-8" /> actually solves

The problem: a file is just raw bytes on disk — nothing inherently
  tells a browser whether byte sequence 0xC3 0xA9 means the character
  "é", or something else entirely
The fix: <meta charset="UTF-8" /> explicitly declares which encoding
  scheme to use to translate those bytes into the correct characters

UTF-8 is the real, practical standard — it can represent essentially every character in every real written language, is backward-compatible with plain ASCII text, and is what virtually every modern tool defaults to. Without a declared charset, or with the wrong one declared, real text like "Bright Leaf Coffee's café-style Americano" can render as garbled boxes or mismatched characters — a bug that's completely invisible in plain English content with no accented characters, and only surfaces the moment real content needs one.

Reserved characters: <, >, and &

<!-- wrong: the browser reads < as the start of a new tag -->
<p>Use the < symbol to mean "less than"</p>

<!-- correct: the entity represents the literal character -->
<p>Use the &lt; symbol to mean "less than"</p>

<, >, and & are reserved by HTML's own syntax — a literal < in page text is ambiguous with the start of a tag, so it has to be written as the entity < to display as a literal less-than sign rather than being interpreted as markup. > and & are the equivalent entities for > and &.

Real, common entities beyond the reserved three

<p>Bright Leaf Coffee&rsquo;s roastery is open Tuesday&ndash;Saturday.</p>
<p>&copy; 2026 Bright Leaf Coffee</p>
<p>Cafetière &amp; French press brewing guides &raquo;</p>

’  →  '  (real, curly right single quote/apostrophe)
–  →  –  (en dash, for a real range like "Tuesday–Saturday")
©   →  ©
»  →  »
    →  a non-breaking space

Most of these characters can actually be typed directly into a UTF-8-encoded file and will display correctly — the entity versions exist mainly for compatibility, and for cases where a character might be visually confusable or hard to type reliably. A real curly apostrophe (') typed directly usually works fine with UTF-8 declared correctly; the entity is a genuine fallback for situations where the source encoding isn't fully trusted.

 : a real, specific, correct use

<p>See our <a href="/pricing">pricing&nbsp;page</a> for full details.</p>

A non-breaking space prevents a line break from ever occurring between the two words it joins — genuinely useful for keeping something like "pricing page" from wrapping awkwardly with "pricing" on one line and "page" alone on the next, or for keeping a number and its unit ("10 GB") from separating across a line break. It's a real, narrow tool — reaching for it everywhere spacing looks slightly off is a misuse; it's specifically for preventing an unwanted line break at one particular point.

Why this connects directly to real SEO and structured data

Part 16's JSON-LD structured data is genuinely strict, valid JSON — a raw, un-escaped " character inside a JSON string value (say, a product name containing a real quotation) breaks the entire JSON-LD block's parsing, not just that one character. JSON has its own separate escaping rules (\" for a literal quote inside a JSON string) distinct from HTML entities — worth keeping straight specifically because part 16's structured data lives inside a <script> tag where HTML entity rules don't apply the same way regular page text does.

Next: HTML performance basics — lazy loading, preload, and the async/defer script attributes that control how a page's resources actually load.