Special Characters & Entities

Course 1 · Ch 11
Special Characters & Entities
Why < and & need special handling, and the entity syntax that lets you display them safely

A handful of characters have special meaning to HTML's parser itself — using them directly in regular text content causes the browser to misinterpret what's actually being said. Entities solve this: a special escape syntax that displays a character literally, without the browser trying to interpret it as markup.

Why This Is Necessary at All

// Trying to literally write "5 < 10" in a paragraph... <p>5 < 10 is true</p> // The browser sees "<" and assumes a NEW TAG is starting, // since "<" is the literal character that opens every tag. // Result: broken, unpredictable rendering.

< signals the start of a tag; & signals the start of an entity (covered in this chapter itself). Using either character literally in regular text content confuses the parser — entities exist specifically to write these characters safely.

The Essential Entities

EntityDisplays asWhy it's needed
&lt;<Opens every HTML tag — must be escaped to display literally
&gt;>Closes every HTML tag — escaped for consistency, though less strictly required than <
&amp;&Opens every entity, including itself — must be escaped to display a literal ampersand
&quot;"Needed inside an attribute value itself wrapped in double quotes
&apos;'Needed inside an attribute value wrapped in single quotes
&nbsp;(non-breaking space)A space that prevents a line break at that exact point — covered further below
// Written correctly, with entities <p>5 &lt; 10 is true</p> // Renders as: 5 < 10 is true <p>Terms &amp; Conditions</p> // Renders as: Terms & Conditions

Named, Decimal, and Hexadecimal Entities

Every entity has a named form (easier for a human to read in source) and equivalent numeric forms — useful for characters that don't have a commonly memorised name.

// Three equivalent ways to display a copyright symbol &copy; // named &#169; // decimal numeric &#xA9; // hexadecimal numeric // All three render as: ©

Common Practical Entities

&copy; // © copyright symbol &trade; // ™ trademark symbol &reg; // ® registered trademark &mdash; // — em dash, for a strong break in a sentence &ndash; // – en dash, for ranges like "pages 10&ndash;20" &hellip; // … ellipsis &pound; // £ pound sterling symbol &euro; // € euro symbol

&nbsp; — The Non-Breaking Space

A regular space allows the browser to break a line at that point if needed for wrapping. &nbsp; behaves like a space visually but specifically prevents a line break there — keeping two words glued together on the same line.

// Without nbsp, "10" and "MB" could end up on separate lines if the text wraps <p>File size: 10&nbsp;MB</p>
Use   sparingly, for genuinely meaningful pairs
Good uses: keeping a number and its unit together (10 MB), a title and initial (J. R. Tolkien). Overusing it to force specific visual spacing throughout a page is generally better handled with CSS — entities solve a character-encoding problem, not a general layout one.

What About Unicode Characters Like 日本語 or 水?

Modern HTML documents, declared with UTF-8 encoding (the now near-universal standard), can include almost any character — emoji, Japanese kanji, accented letters — directly in the source text, with no entity needed at all. Entities are specifically for the small set of characters that have special meaning to HTML's own parser (<, >, &, quote characters inside matching attribute quotes), not a general mechanism for "any character that isn't plain English."

Never skip escaping & and < when displaying user-submitted content
If a website ever displays text a user typed (a comment, a username, a search query) back on the page without escaping these characters first, a malicious user could submit text containing real HTML/script tags that the browser then executes — this is the basis of cross-site scripting (XSS) attacks, covered properly in the browser security course's CSP chapter. Always escape user-submitted content before inserting it into a page.

Chapter 11 Quick Reference

  • &lt; / &gt; / &amp; — escape these whenever the literal <, >, or & character is genuinely intended in text
  • &quot; / &apos; — needed inside an attribute value matching the surrounding quote style
  • Named vs numeric (&#169; / &#xA9;) — equivalent forms; named is more readable in source
  • &nbsp; — a space that prevents line-wrapping at that point; use sparingly, for meaningful pairs
  • UTF-8 encoded documents can include non-English characters and emoji directly — entities are only for parser-significant characters
  • Always escape user-submitted content before displaying it — the basis of XSS prevention
  • Next chapter (final, Course 1): putting it all together — building a simple multi-page site structure