HTML Entity Encode/Decode: Safely Display Special Characters
When you need to display characters like <, >, or & in HTML without the browser interpreting them as markup, you need HTML entity encoding. It’s also a critical first line of defense against cross-site scripting (XSS) attacks.
What Are HTML Entities?
HTML entities are special sequences that represent characters which have meaning in HTML syntax. The browser renders them as the intended character instead of interpreting them as code.
Common HTML Entities
| Character | Entity Name | Entity Number | Description |
|---|---|---|---|
& | & | & | Ampersand |
< | < | < | Less than |
> | > | > | Greater than |
" | " | " | Double quote |
' | ' | ' | Single quote (apostrophe) |
| |   | Non-breaking space |
© | © | © | Copyright |
€ | € | € | Euro sign |
Why HTML Encoding Matters
Preventing XSS Attacks
Cross-site scripting (XSS) is one of the most common web vulnerabilities. Without encoding, user input containing HTML or JavaScript can be executed by the browser:
<!-- Without encoding — DANGEROUS! -->
<p>Welcome, <script>alert('hacked')</script></p>
<!-- With encoding — Safe -->
<p>Welcome, <script>alert('hacked')</script></p>The encoded version displays the literal text instead of executing the script.
Displaying Code Snippets
When showing HTML code examples on a web page, you must encode the tags so they’re displayed rather than rendered:
<pre><code><div class="container">
<h1>Hello</h1>
</div></code></pre>Preserving Special Characters
The & character is especially tricky because it starts entity sequences. URLs in HTML attributes must encode ampersands:
<!-- Wrong — browser may misinterpret -->
<a href="page?a=1&b=2">Link</a>
<!-- Correct -->
<a href="page?a=1&b=2">Link</a>Named vs Numeric Entities
HTML entities come in two forms:
Named entities use a descriptive name: &, <, ©
- Easier to read and remember
- Limited set (not every character has a named entity)
Numeric entities use the Unicode code point: &, <, ©
- Work for any Unicode character
- Can use decimal (
©) or hex (©) notation
When to Encode vs Decode
Encode When:
- Inserting user-generated content into HTML
- Displaying code snippets on web pages
- Building HTML strings in JavaScript
- Creating email templates with special characters
- Storing content that will be rendered as HTML
Decode When:
- Reading content from an API that returns encoded HTML
- Extracting text from HTML for processing
- Converting encoded content back for editing
- Migrating content between systems
- Debugging encoded strings in logs or databases
How to Use Our HTML Encode/Decode Tool
- Paste your text or HTML into the input area
- Click Encode to convert special characters to HTML entities
- Or click Decode to convert entities back to characters
- Copy the result with one click
What Gets Encoded
Our encoder converts the five critical characters that can cause issues in HTML:
&→&<→<>→>"→"'→'
The decoder handles both named entities (&) and numeric entities (&, &).
Framework-Specific Encoding
Most modern frameworks handle encoding automatically in templates:
- React: JSX auto-escapes values in
{expressions} - Vue: Double curly braces
{{ value }}auto-escape - Angular: Interpolation
{{ value }}auto-escapes - Astro: Expressions in
{value}are auto-escaped
Warning: Using dangerouslySetInnerHTML (React), v-html (Vue), or set:html (Astro) bypasses encoding — only use these with trusted content.
Frequently Asked Questions
Does encoding affect how the page looks? No. Encoded entities render identically to the original characters. The encoding only affects the HTML source code, not the visual output.
Should I encode everything or just certain characters?
For user input in HTML context, encoding the five critical characters (& < > " ') is sufficient. For attribute values, also ensure proper quoting.
What about UTF-8 characters like emoji? If your page uses UTF-8 encoding (which it should), characters like emoji, accented letters, and CJK characters don’t need entity encoding. They can be included directly in the source.
Try our free HTML Encode/Decode tool to safely convert HTML entities right in your browser.
Try Ghost Image Hub
The Chrome extension that makes managing your Ghost blog images a breeze.
Learn More