HTML Entities — Encode & Decode Special Characters Correctly
By sadiqbd · June 6, 2026
HTML entities are the reason your angle brackets don't break the page
Every time you want to display < or > literally in HTML, you need an entity. Use them raw and the browser interprets them as tag delimiters — your carefully written <code> example becomes invisible, your content disappears, or the page structure breaks.
HTML entities are also how you include characters that don't exist on a standard keyboard: copyright symbols, em dashes, non-breaking spaces, mathematical operators, and special characters from extended Unicode. Understanding when and how to use them is a small but genuinely important part of writing correct HTML.
What Are HTML Entities?
An HTML entity is a string that starts with & and ends with ; — it represents a single character that either can't be typed directly, has special meaning in HTML, or needs to be displayed literally rather than parsed.
There are two forms:
Named entities: < = <, > = >, & = &, © = ©
Numeric entities: < = < (decimal), < = < (hexadecimal)
Named entities are more readable. Numeric entities work for any Unicode character, including those without a named equivalent.
The Essential HTML Entities Every Developer Needs
| Character | Entity | Use case |
|---|---|---|
< |
< |
Display literal angle brackets in HTML |
> |
> |
Display literal angle brackets in HTML |
& |
& |
Display literal ampersand |
" |
" |
Literal quote inside "..." attributes |
' |
' |
Literal apostrophe inside '...' attributes |
(non-breaking space) |
|
Space that won't wrap to next line |
| © | © |
Copyright symbol |
| ® | ® |
Registered trademark |
| ™ | ™ |
Trademark symbol |
| — | — |
Em dash (long dash) |
| – | – |
En dash (medium dash) |
| … | … |
Horizontal ellipsis |
| → | → |
Right arrow |
| ← | ← |
Left arrow |
| × | × |
Multiplication sign (not letter x) |
| ÷ | ÷ |
Division sign |
| ≠ | ≠ |
Not equal |
| ≤ | ≤ |
Less than or equal |
| ≥ | ≥ |
Greater than or equal |
| π | π |
Pi |
| € | € |
Euro sign |
| £ | £ |
Pound sterling |
| ¥ | ¥ |
Yen |
How to Use the HTML Entities Tool on sadiqbd.com
Encoding (text → HTML entities):
- Enter or paste text that contains special characters.
- Click Encode.
- The output replaces
<,>,&,", and other special characters with their entity equivalents. - Copy the encoded output for safe use in HTML.
Decoding (HTML entities → text):
- Paste HTML-encoded text.
- Click Decode.
- Read the original text with entities converted back to characters.
Real-World Examples
Displaying code examples in HTML
You're writing a tutorial about HTML tags and need to show <div class="container"> literally on the page.
Raw HTML would render the div, not show it. Encode it:
Input: <div class="container">
Output: <div class="container">
In your HTML:
<code><div class="container"></code>
Displayed: <div class="container"> — exactly what you want.
User-generated content sanitisation
A user submits a comment: My blog post is at example.com/?page=1&tab=2 <script>alert('xss')</script>
HTML-encoding this input:
&→&<→<>→>
Encoded: My blog post is at example.com/?page=1&tab=2 <script>alert('xss')</script>
When rendered, the browser displays it as plain text — the script tag is visible text, not executable code. This is a basic XSS prevention technique (though server-side sanitisation is still required — never rely on client-side encoding alone).
Special typographic characters
You want to use proper typography:
- Em dash instead of double hyphen:
company—founded in 1998 - Non-breaking space to keep "30 km" on one line:
30 km - Proper ellipsis instead of three dots:
Loading… - Copyright in a footer:
© 2025 sadiqbd.com
These are subtle but make a real difference to text rendering quality.
Mathematical notation in HTML
You need to show a formula: n ≤ 100 and x ≠ 0
<p>where n ≤ 100 and x ≠ 0</p>
For complex mathematical notation, MathML or a library like MathJax is better — but for simple symbols, HTML entities cover the basics.
Why & in URLs Matters
URLs in HTML attributes need the & encoded as &:
Wrong:
<a href="page.html?id=1&tab=2">Link</a>
Correct:
<a href="page.html?id=1&tab=2">Link</a>
The HTML specification requires this. Browsers are forgiving and render the wrong version correctly, but validators will flag it, and some XML-based HTML processors (XHTML, SVG) will reject it outright.
When You Don't Need HTML Entities
Modern HTML documents with a UTF-8 charset declaration can include most Unicode characters directly, without entities:
<meta charset="UTF-8">
With this declaration, you can write ©, →, €, and even emoji directly in your HTML source. The four characters that always need encoding are:
<(must be<)>(should be>)&(must be&)"inside double-quoted attributes (must be")
Everything else can go in directly if your document is UTF-8 encoded — but using named entities for special symbols is still good practice for readability and compatibility.
Tips for Working With HTML Entities
Let your framework handle most encoding. React, Vue, Angular, and Django auto-escape HTML in templates by default. Manual entity encoding is mainly needed in raw HTML, when building strings in JavaScript, or in contexts where the framework's auto-escaping is bypassed.
Never trust user input without encoding. Any user-supplied content that ends up in your HTML must be HTML-encoded before rendering. This is the most common source of XSS vulnerabilities.
is not a substitute for CSS. It's tempting to use non-breaking spaces for layout spacing. Don't — use CSS margins and padding instead. Reserve for genuine non-breaking-space semantics (like "30 km" that shouldn't split across lines).
Use the tool to debug garbled characters. If you're seeing literal &nbsp; or <p> in a rendered page, it means something was double-encoded. The decoder helps diagnose where the encoding happened twice.
Frequently Asked Questions
Why does & sometimes appear as literal text on a page?
Double encoding. If text containing & is HTML-encoded again, it becomes &amp; — which renders as the literal string & rather than &. Check where encoding is applied in your pipeline.
Do I need to encode > as >?
Inside HTML text content, > is technically allowed raw (it's only < that's strictly required to be encoded). However, encoding both < and > is best practice for clarity and consistent tool behaviour.
What's the difference between " and "?
They represent the same character (") — " is the named entity, " is the decimal numeric entity. Use whichever your codebase prefers; both are valid HTML.
Can I use HTML entities in JavaScript strings?
No — HTML entities are decoded by the browser's HTML parser, not by JavaScript. Inside a JavaScript string, < is a literal 4-character string. If you need to put HTML-encoded content into a JavaScript string for later injection into the DOM, that's a workflow smell — use the DOM API instead.
Is the HTML entities tool free? Yes — completely free, no sign-up required.
HTML entities are a small but important part of writing correct, safe HTML. Knowing the handful of characters that always need encoding — and having a tool to handle the rest quickly — keeps your code correct and your pages readable.
Try the HTML Entities tool free at sadiqbd.com — encode and decode any text instantly.
