TL;DR: HTML entities are special codes (like & for & and < for <) that let you safely display reserved characters in HTML. You MUST escape &, <, >, and quotes. For everything else, UTF-8 usually has you covered — but entities are great for invisible characters and symbols you can't type.
Ever typed a < in your HTML and watched your entire page break? Congratulations, you've just discovered why HTML entities exist! They're the escape hatches that let you display characters the browser would otherwise try to interpret as code.
What Are HTML Entities, Anyway?
An entity is a string that starts with & and ends with ;. It tells the browser: "Hey, don't try to interpret this — just display this specific character." They come in two flavors:
- Named entities: Human-readable, like
&for &,<for <,©for © - Numeric entities: Unicode code points — decimal (
©) or hex (©)
All three of ©, ©, and © render the same thing: ©. Named entities are easier to read in source code, but numeric ones work for any Unicode character.
The Big Five: Characters You MUST Escape
These five characters have special meaning in HTML. If you use them as plain text without escaping, things will break:
| Character | Entity | Numeric | Why It's Special |
|---|---|---|---|
| & | & | & | Starts an entity reference |
| < | < | < | Opens an HTML tag |
| > | > | > | Closes an HTML tag |
| " | " | " | Delimits attribute values |
| ' | ' | ' | Also delimits attribute values |
Dev Joke: A developer walks into a bar and orders a <beer>. The bartender says "Sorry, we don't serve HTML tags." The developer replies: "Fine, give me a <beer>."
Your Go-To Symbol Reference
Currency Symbols
| Symbol | Entity | Description |
|---|---|---|
| ¢ | ¢ | Cent sign |
| £ | £ | Pound sterling |
| ¥ | ¥ | Yen / Yuan |
| € | € | Euro sign |
| ₹ | ₹ | Indian Rupee (no named entity) |
Typography Essentials
| Symbol | Entity | What It Is |
|---|---|---|
| © | © | Copyright (every footer ever) |
| ® | ® | Registered trademark |
| ™ | ™ | Trademark |
| ° | ° | Degree sign (72°F) |
| • | • | Bullet point |
| … | … | Ellipsis (...but classier) |
| – | – | En dash (for ranges: 1–10) |
| — | — | Em dash — the king of dashes |
| “ | “ | Left double quote “ |
| ” | ” | Right double quote ” |
Arrows
| Symbol | Entity | Description |
|---|---|---|
| ← | ← | Left arrow |
| → | → | Right arrow |
| ↑ | ↑ | Up arrow |
| ↓ | ↓ | Down arrow |
| « | « | Double angle left « |
| » | » | Double angle right » |
Math Symbols
| Symbol | Entity | Description |
|---|---|---|
| × | × | Multiplication (not the letter x!) |
| ÷ | ÷ | Division |
| ± | ± | Plus-minus |
| ≠ | ≠ | Not equal |
| ∞ | ∞ | Infinity ∞ |
The Invisible Characters
HTML collapses multiple spaces into one. These entities give you precise whitespace control:
| Entity | What It Does | Width |
|---|---|---|
| Non-breaking space (keeps words together) | Normal space |
  | En space | Half an em |
  | Em space | One em width |
  | Thin space | About 1/5 em |
Pro Tip: The main use of is preventing line breaks between words that should stay together, like "100 km" or "Dr. Smith." Don't use it for layout spacing — that's what CSS margin and padding are for!
Encoding & Decoding in JavaScript
Here's a neat trick — let the browser do the work:
// Encode: text → HTML entities
function encodeHTML(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
encodeHTML('<script>alert("xss")</script>');
// "<script>alert("xss")</script>"
// Decode: HTML entities → text
function decodeHTML(html) {
const div = document.createElement('div');
div.innerHTML = html;
return div.textContent;
}
Security Reminder: Always encode user-generated content before inserting it into HTML. This is your first line of defense against XSS (Cross-Site Scripting) attacks. Never trust user input!
Do I Even Need Entities in 2026?
With modern UTF-8 encoding (which you should always use), you can type most characters directly. You only need entities when:
- Reserved characters: Always escape
&,<,>in text, and"in attributes. Non-negotiable. - Invisible characters: Non-breaking spaces and zero-width joiners — you can't see them in source code, so entities make your intent clear.
- Characters not on your keyboard: When you need a specific symbol and can't easily type it.
- User-generated content: Always encode to prevent XSS attacks.
For accented characters, emoji, and international text — just type them directly with <meta charset="UTF-8"> in place.
Wrapping Up
HTML entities are one of those things every web developer needs to know. The Big Five reserved-character entities are non-negotiable for correctness and security. Beyond that, entities give you a portable way to include symbols, typography, and invisible spacing in your markup. Bookmark this page — you'll be back.
Try It Yourself
Encode and decode HTML entities instantly — paste any text and see the entity-encoded version in real time.
Open HTML Entity Encoder →