HTML Entities & Special Characters
Mentor's Note: Have you ever typed
<html>in a paragraph and watched it vanish into thin air? That's HTML treating your text as code! Entities are your escape hatch โ they let you show reserved characters, symbols, and emoji without breaking your page. Master these and you'll never get "eaten" by the browser again!
What are HTML Entities?โ
HTML entities are special codes that represent characters which are either reserved in HTML or not available on your keyboard. When the browser sees an entity, it renders the corresponding character instead of interpreting it as code.
Common Reserved Charactersโ
These five characters are reserved in HTML. If you type them directly in your content, the browser will try to interpret them as code. Always use entities for these:
| Character | Entity Name | Entity Number | Description |
|---|---|---|---|
< | < | < | Less than |
> | > | > | Greater than |
& | & | & | Ampersand |
" | " | " | Double quote |
' | ' | ' | Apostrophe / Single quote |
(space) | |   | Non-breaking space |
Symbol Entitiesโ
| Entity | Result | Description |
|---|---|---|
© | ยฉ | Copyright |
® | ยฎ | Registered trademark |
™ | โข | Trademark |
€ | โฌ | Euro currency |
£ | ยฃ | Pound currency |
¥ | ยฅ | Yen currency |
$ | $ | Dollar (not needed but shown) |
¢ | ยข | Cent |
§ | ยง | Section |
¶ | ยถ | Paragraph |
° | ยฐ | Degree |
± | ยฑ | Plus-minus |
× | ร | Multiplication |
÷ | รท | Division |
< | < | Less than |
> | > | Greater than |
& | & | Ampersand |
" | " | Double quote |
' | ' | Apostrophe |
| (space) | Non-breaking space |
Mathematical Symbol Entitiesโ
| Entity | Result | Description |
|---|---|---|
∀ | โ | For all |
∂ | โ | Partial differential |
∃ | โ | There exists |
∅ | โ | Empty set |
∇ | โ | Nabla |
∈ | โ | Element of |
∉ | โ | Not element of |
∑ | โ | Summation |
∏ | โ | Product |
√ | โ | Square root |
α - ω | ฮฑ - ฯ | Greek letters |
Arrow & Icon Entitiesโ
| Entity | Result | Description |
|---|---|---|
← | โ | Left arrow |
↑ | โ | Up arrow |
→ | โ | Right arrow |
↓ | โ | Down arrow |
↔ | โ | Left-right arrow |
♠ | โ | Spade |
♣ | โฃ | Club |
♥ | โฅ | Heart |
♦ | โฆ | Diamond |
Using Entities in HTMLโ
Entities always start with an ampersand (&) and end with a semicolon (;). Here's how they work in context:
<p>To save a file, press Ctrl + S.</p>
<p>The <h1> tag is the main heading in HTML.</p>
<p>ยฉ 2025 My Company. All rights reserved.</p>
<p>Price: £29.99 (approx. €34.99)</p>
<p>Water boils at 100°C (±1°).</p>
Browser output:
To save a file, press Ctrl + S. The
<h1>tag is the main heading in HTML. ยฉ 2025 My Company. All rights reserved. Price: ยฃ29.99 (approx. โฌ34.99) Water boils at 100ยฐC (ยฑ1ยฐ).
Character Encodingโ
Before entities even come into play, your browser needs to know what character set your page uses. This is where <meta charset="UTF-8"> comes in:
Always include this tag in the <head> of your HTML documents:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
</head>
<body>
<!-- your content -->
</body>
</html>
Named vs Numeric Entitiesโ
Entities come in two flavors:
| Feature | Named Entity | Numeric Entity |
|---|---|---|
| Format | & | & |
| Readability | Easy to read and remember | Harder to read |
| Browser support | Widely supported | Supported everywhere |
| Character coverage | Only common symbols | Any Unicode character |
| Best for | Everyday use (copyright, arrows, quotes) | Rare or obscure characters |
Verdict: Use named entities when possible. Use numeric entities when no named version exists.
Emoji in HTMLโ
Most emoji work directly in HTML thanks to UTF-8 encoding โ no entity needed:
<p>I โค๏ธ coding! ๐ Let's build something awesome! ๐</p>
If you prefer (or need) the hex reference, you can use:
<p>I ❤️ coding! 🚀 Let's build something awesome! 🎉</p>
Both produce: I โค๏ธ coding! ๐ Let's build something awesome! ๐
When NOT to Use Entities (Common Mistakes)โ
| Mistake | Why It's Wrong | What To Do Instead |
|---|---|---|
for spacing | HTML collapses whitespace, but abusing for layout is fragile | Use CSS margin or padding |
to indent paragraphs | Wrong tool for the job | Use CSS text-indent |
<br><br> for spacing | Line breaks aren't meant for margins | Use CSS margin-bottom |
Using & in URLs (correctly) | Actually this one is correct inside HTML โ but don't over-encode | Only encode & in URLs inside HTML attributes |
Rule of thumb: Entities are for content (displaying special characters). CSS is for layout and spacing.
Quick Reference โ 10 Essential Entitiesโ
Memorize these and you'll be covered for 95% of cases:
| # | Entity | Result | Why |
|---|---|---|---|
| 1 | < | < | Show HTML tags in text |
| 2 | > | > | Show HTML tags in text |
| 3 | & | & | Avoid breaking your markup |
| 4 | " | " | Safe quotes in attributes |
| 5 | ' | ' | Safe apostrophes in attributes |
| 6 | | (space) | Prevent line breaks between words |
| 7 | © | ยฉ | Copyright notice |
| 8 | € | โฌ | Euro currency |
| 9 | ° | ยฐ | Temperature / angles |
| 10 | → | โ | Point to something |
Try It Yourselfโ
Copy this into an HTML file and open it in your browser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Entities Demo</title>
<style>
body { font-family: Arial, sans-serif; max-width: 600px; margin: 2rem auto; }
</style>
</head>
<body>
<h1>HTML Entities Demo</h1>
<h2>Reserved Characters</h2>
<p>The <div> tag is a block-level element.</p>
<p>Use &amp; for the ampersand character.</p>
<h2>Symbols</h2>
<p>© 2026 โ All rights reserved.</p>
<p>Price: €49.99 (approx. £42.00)</p>
<p>Water boils at 100°C.</p>
<h2>Arrows</h2>
<p>Click the button → to continue.</p>
<p>Navigate using ← ↑ ↓ → keys.</p>
<h2>Math</h2>
<p>3 × 4 = 12 & 12 ÷ 3 = 4</p>
<p>Sum of all elements: ∑x<sub>i</sub></p>
</body>
</html>
๐ Related Topicsโ
- HTML Text Formatting โ Style and format text content
- Inline Text Formatting Basics โ Bold, italic, and inline tags
- Internationalization โ Character encoding across languages
๐ฏ Next up: HTML Formatting โ Learn how to style text with bold, italic, underline, and more!