Character Entities
1) Need for Character Entities
Sometimes you must show characters that HTML normally uses for its own tags or characters that are invisible or special symbols.
- Reserved characters:
<,>,&are part of HTML tags. If you type them directly, the browser may treat them as code. - Invisible spacing: Extra spaces and line breaks collapse in HTML. You need a special space when you want it not to collapse.
- Symbols/foreign characters: ©, ₹, €, ±, →, etc.
- Inside attributes: Quotes (
" ') may need escaping.
Even with UTF-8 (
<meta charset="UTF-8">)—which lets you type most symbols directly—you must still escape<,>, and&when they appear as text.
2) Common Entities
| Purpose | Entity (named) | Numeric (decimal) | Hex | Shows |
|---|---|---|---|---|
| Less-than | < | < | < | < |
| Greater-than | > | > | > | > |
| Ampersand | & | & | & | & |
| Non-breaking space | |   |   | ␠ (no wrap) |
| Double quote | " | " | " | " |
| Single quote/apostrophe | '* | ' | ' | ' |
| Rupee sign | ₹ | — | ₹ | ₹ |
| Copyright | © | © | © | © |
| Registered | ® | ® | ® | ® |
| Trade mark | ™ | ™ | ™ | ™ |
| En dash | – | – | – | – |
| Em dash | — | — | — | — |
| Euro | € | € | € | € |
* ' wasn’t in old HTML4 but works in modern browsers. ' is safest.
3) Using Entities in HTML Pages
A) Showing angle brackets or ampersands in text
<p>Use <h1> for the main heading and write & to show an ampersand.</p>
B) Writing math or comparisons
<p>If x < y & y < z, then x < z.</p>
C) Preventing line breaks or extra-space collapse
- Normal spaces collapse:
A B→ “A B” - Use non-breaking space to keep spacing or to stick words together:
<p>Roll No. 23</p>
<!-- stays on one line -->
<p>Marks: 98/100</p>
Tip: Don’t use
for layout. Prefer CSS margins/padding.
D) Inside attributes
<p title='He said "Hello" to me'>Hover me</p>
E) Symbols and currency
<p>Price: ₹ 499 — Limited offer!</p>
F) Named vs Numeric
- Named (
©) are easy to remember. - Numeric (
©or©) cover any Unicode character, even if no name exists.
Mini Cheat Sheet (exam-ready)
-
Always escape:
<>& -
Non-breaking space:
(prevents wrapping) -
Quotes in attributes:
"and' -
Use UTF-8:
<meta charset="UTF-8" />Then type symbols directly when safe; still escape
<,>,&.