HTML entities
Special characters use entities: < for <, > for >, & for &, for non-breaking space, © for ©. Use them when you need to show the character, not use it as code.
Appy Says…
What if you want to display <p> on a web page without the browser treating it as a tag? HTML entities let you display reserved characters as visible text — and add copyright symbols, arrows, and special characters.
What are HTML Entities?
HTML entities are escape codes for characters that have special meaning in HTML, or characters that can't be typed easily. They start with & and end with ;.
- •
<→ < (would start a tag) - •
>→ > (would close a tag) - •
&→ & (would start an entity) - •
→ non-breaking space (won't line-break) - •
©→ © (copyright symbol) - •
—→ — (em dash) - •Numeric:
♥→ ♥ (Unicode code point)
Think of it like escaping special characters in code
In Python, if you want a quote inside a string you write \' — escaping it. HTML entities work the same way: if you want < to appear as text (not open a tag), you escape it as <.
How It Works
- •1. The browser's HTML parser recognises
&name;patterns - •2. It replaces them with the corresponding Unicode character before rendering
- •3. Reserved chars (< > & ") MUST be escaped in page content
- •4. Named entities:
©for ©,®for ®,™for ™ - •5. Numeric:
♥decimal,♥hex — any Unicode character - •6. In attribute values: use
&for & in URLs
Real-World Examples
- •Code tutorial sites use
<and>to show HTML tags as visible text - •Footer copyright:
© 2024 Applaa Ltd - •Prices:
£9.99→ £9.99,€9.99→ €9.99 - •Non-breaking space:
20 mphkeeps number and unit together on one line
Key Facts
- •There are over 2,000 named HTML entities, but you only need ~10 in practice
- •Modern HTML5 with UTF-8 encoding means you can type most symbols directly — entities are mainly for reserved chars
- •Failing to escape < and > in user content can cause XSS (cross-site scripting) attacks
- •
adds non-collapsing space — useful occasionally, but CSS margin/padding is usually better
Watch Out!
Never display raw user input directly in HTML without escaping it. If a user types <script>alert('hacked')</script> and you show it unescaped, it runs in other browsers. Always encode user input (or use a framework that escapes by default, like React).
Remember
Escape reserved chars: < = <, > = >, & = &. Modern UTF-8 means most symbols can be typed directly. Always sanitise user input to prevent XSS.
What You Learned
- •HTML entities escape reserved chars and add special symbols — format:
&name;or&#number; - •Must escape < > & from user input; framework templates like React do this automatically
- •Unlocks: displaying code in docs, safe user content, special characters in any language or currency
Key Facts
- →There are over 2,000 named HTML entities, but you only need ~10 in practice
- →Modern HTML5 with UTF-8 encoding means you can type most symbols directly — entities are mainly for reserved chars
- →Failing to escape < and > in user content can cause XSS (cross-site scripting) attacks
- →
adds non-collapsing space — useful occasionally, but CSS margin/padding is usually better
Real-World Examples
Remember
Escape reserved chars: < = <, > = >, & = &. Modern UTF-8 means most symbols can be typed directly. Always sanitise user input to prevent XSS.
Quick Quiz
& shows?