HTML Encoder / Decoder
Encode HTML special characters into safe entities or decode HTML entities back into readable text. Work with named, decimal and hexadecimal entities directly in your browser.
Encode or Decode HTML
Convert HTML-sensitive characters into entities or decode HTML entities back into readable text directly in your browser.
Current Method
Encodes selected HTML-sensitive characters using familiar HTML entities.
Shortcut: Ctrl/Cmd + Enter to convert
Conversion Details
Review the selected operation and the size of the current input and output.
Operation
Encode
Entity Style
Named Entities
Input Bytes
0
Output Bytes
0
HTML Entity Reference
Common HTML-sensitive characters and their named, decimal and hexadecimal representations.
| Character | Named | Decimal | Hexadecimal |
|---|---|---|---|
&
|
&
|
&
|
&
|
<
|
<
|
<
|
<
|
>
|
>
|
>
|
>
|
"
|
"
|
"
|
"
|
'
|
'
|
'
|
'
|
Example: Displaying HTML as Text
If you want a browser to display HTML source rather than interpret it as markup, the HTML-sensitive characters need to be escaped.
Original HTML
<div class="notice">Tom & Jerry</div>
Encoded Source
<div class="notice">Tom & Jerry</div>
HTML Encoding vs URL Encoding
The same character can require a completely different representation depending on where it is used.
| Original | HTML | URL Component |
|---|---|---|
&
|
&
|
%26
|
<
|
<
|
%3C
|
>
|
>
|
%3E
|
How Double HTML Encoding Happens
Encoding content that has already been escaped can produce another layer of entities.
Original
<
Encoded Once
<
Encoded Twice
&lt;
HTML Escaping in Laravel Blade
Blade normally handles HTML escaping for ordinary output automatically.
Escaped output
{{ $value }}
Blade escapes HTML-sensitive output by default.
Raw output
{!! $value !!}
Raw output should only be used with content that is trusted or appropriately sanitized.
HTML Encoding Is Context-Specific
Correct output escaping is an important web security measure, but different contexts require different treatment.
HTML text, HTML attributes, URLs, JavaScript and CSS are not interchangeable contexts. Production applications should use the escaping mechanisms provided by their framework for the actual output location.
Encoding Is Not the Same as HTML Sanitization
HTML encoding makes selected characters appear as text. Sanitization is a different process that inspects markup and removes or restricts unsafe elements, attributes or values.
Decoded untrusted HTML should not be inserted directly into the page using unsafe DOM APIs without appropriate sanitization.
Private Browser-Based HTML Conversion
HTML encoding and entity decoding happen directly inside your browser.
- No file upload is required.
- Your input does not need to be sent to SwiftVecto's server.
- Named and numeric entity conversion is performed locally.
- Decoding uses browser HTML parsing behaviour without rendering the decoded markup into the page.
Continue with These Tools
Finished using HTML Encoder / Decoder? Here are some related tools that people commonly use next to complete their workflow faster.
URL Encoder / Decoder
Encode or decode URLs and URL components instantly. Convert special characters to percent-encoded values, decode encoded text and work with URI components or form-style query data directly in your browser.
Base64 Encoder / Decoder
Encode text to Base64 or decode Base64 back to readable text instantly. Supports UTF-8 and Base64URL with private browser-based processing.
XML Formatter & Validator
Format, minify and validate XML instantly. Beautify XML with configurable indentation, detect malformed markup and inspect document statistics directly in your browser.
JSON Formatter & Validator
Format, beautify, minify and validate JSON online instantly. Detect invalid JSON, organise nested data and create clean, readable JSON directly in your browser.
Regex Tester
Test JavaScript regular expressions online with live match highlighting, capturing groups, named groups, flags and replacement previews directly in your browser.
How to Encode and Decode HTML Entities
Use the SwiftVecto HTML Encoder / Decoder to escape characters that have special meaning in HTML or convert HTML entities back into readable characters. Choose between named entities, decimal numeric entities and hexadecimal numeric entities depending on the output you need.
Overview
HTML uses certain characters as part of its markup syntax. Characters such as <, >, &, double quotes and single quotes may therefore need to be escaped when they are intended to appear as text rather than markup. HTML entities provide representations such as <, >, & and ". HTML also supports numeric character references such as < and hexadecimal character references such as <. Encoding is especially useful when displaying code examples or user-provided text without allowing markup characters to be interpreted as HTML. Decoding performs the reverse operation and converts recognised entities back into their corresponding characters. HTML encoding is context-specific and should not be confused with URL encoding, Base64 encoding or encryption.
Benefits
How It Works
Choose whether you want to encode or decode.
When encoding, choose the entity style required for the output.
Named Entity mode uses familiar HTML entities for supported characters, such as <, >, & and ".
Decimal Entity mode represents encoded characters using decimal Unicode code points such as <.
Hexadecimal Entity mode represents encoded characters using hexadecimal code points such as <.
Choose which HTML-sensitive characters should be escaped when using selective encoding.
Paste or type the source content into the input area.
The browser converts characters into the selected entity representation.
When decoding, recognised named and numeric HTML entities are converted back into characters.
The result can be copied or swapped back into the input for reverse testing.
Normal interactive processing happens locally in the browser.
How to Use This Tool
-
1Choose Encode to convert characters into HTML entities or Decode to restore entities to text.
-
2When encoding, choose Named, Decimal or Hexadecimal entities.
-
3Select the characters you want encoded.
-
4Paste or type your text or HTML source into the input area.
-
5Run the conversion or allow the browser interface to update automatically.
-
6Review the output.
-
7Copy the converted value when required.
-
8Use Swap to place the output back into the input and reverse the operation.
-
9Use Clear to start another conversion.
Helpful Tips
- Encode & before other HTML-sensitive characters when implementing escaping manually, otherwise newly created entity ampersands can accidentally be escaped again.
- In production applications, prefer trusted framework escaping functions rather than manually replacing characters yourself.
- Laravel Blade {{ }} output is escaped automatically by default.
- Blade {!! !!} output is not escaped and should only be used when rendering HTML that is known to be safe.
- Use < and > when you want HTML tags to appear visibly as text rather than being interpreted as markup.
- Use & when an ampersand needs to appear literally in HTML text.
- Quotes often require special attention when data is inserted into HTML attributes.
- The correct escaping strategy depends on the output context. HTML text, HTML attributes, JavaScript and URLs do not use identical escaping rules.
- HTML entity encoding is not encryption.
- Encoded content can be decoded back into the original characters.
- Do not confuse & with URL encoding %26.
- Do not repeatedly encode content unless double encoding is intentional.
- If < becomes &lt;, the content has usually been HTML encoded more than once.
- Numeric entities can represent characters even when a convenient named entity does not exist.
- Hexadecimal character references use x after &#, for example <.
Common Uses
Display an HTML snippet on a documentation page without rendering it.
Encode user-supplied text before inserting it into HTML.
Decode content received from a CMS that contains HTML entities.
Convert & back into an ampersand.
Convert <div> back into <div>.
Generate decimal numeric entities for special characters.
Generate hexadecimal HTML character references.
Inspect encoded text returned by an API.
Debug double-encoded HTML entities.
Escape quotation marks used within HTML attributes.
Convert Unicode symbols into numeric HTML entities.
Compare HTML escaping with URL encoding while developing a web application.
Worked Examples
The following examples demonstrate how this tool can be used in realistic scenarios.
Displaying an HTML Tag as Text
The source <strong>Hello</strong> can be encoded as <strong>Hello</strong>. A browser displaying that encoded value as HTML text shows the tag characters rather than creating a strong element.
Encoding an Ampersand
The text "Research & Development" becomes "Research & Development" when the ampersand is encoded using its named HTML entity.
Decoding HTML Entities
The input Tom & Jerry decodes to Tom & Jerry because & represents an ampersand character.
Decimal Numeric Entity
The less-than character < has Unicode code point 60 in decimal, so it can be represented as <.
Hexadecimal Numeric Entity
The less-than character < has hexadecimal code point 3C, so it can be represented as <.
Detecting Double Encoding
If < becomes &lt;, the ampersand belonging to the original entity has been encoded again. Decoding once produces <, while decoding a second time produces <.
Common Mistakes
Avoid these common mistakes to achieve the most accurate results.
- Confusing HTML encoding with URL encoding.
- Assuming HTML encoding encrypts content.
- Encoding content more than once and producing values such as &lt;.
- Decoding repeatedly without knowing how many encoding layers were applied.
- Failing to encode an ampersand when it should be displayed literally.
- Using HTML escaping when the actual output context is JavaScript.
- Using HTML escaping when the actual output context is a URL parameter.
- Rendering untrusted HTML using Blade {!! !!} output.
- Attempting to secure arbitrary HTML simply by replacing < and >.
- Assuming entity encoding sanitizes malicious HTML in every context.
- Forgetting that HTML attribute contexts can have different escaping requirements from ordinary text nodes.
- Treating HTML entity decoding as safe sanitization.
- Encoding quotation marks unnecessarily when the target context does not require them.
- Assuming every Unicode character has a convenient named HTML entity.
- Manually maintaining a huge entity mapping when browser or framework parsers can perform standards-aware decoding.
Glossary
Definitions of the most important terms used by this tool.
HTML Entity
A textual representation of a character in HTML, commonly beginning with & and ending with ;.
HTML Encoding
The process of replacing characters that may be interpreted specially by HTML with safe entity or character-reference representations.
HTML Decoding
The process of converting recognised HTML entities and numeric character references back into their corresponding characters.
Named Entity
An HTML character reference identified by a name, such as &, <, > or ".
Numeric Character Reference
An HTML representation using the Unicode code point of a character, such as © for ©.
Decimal Entity
A numeric HTML character reference containing a decimal Unicode code point, such as < for <.
Hexadecimal Entity
A numeric HTML character reference containing a hexadecimal Unicode code point, such as < for <.
Escaping
Representing potentially special syntax characters in a form where they are interpreted as data rather than markup or code.
Unescaping
Restoring escaped or encoded representations to their original characters.
&
The named HTML entity representing an ampersand character (&).
<
The named HTML entity representing the less-than character (<).
>
The named HTML entity representing the greater-than character (>).
"
The named HTML entity representing a double quotation mark (").
Unicode Code Point
A numeric identifier assigned to a Unicode character and used by numeric HTML character references.
Double Encoding
Encoding content that has already been encoded, often producing strings such as &lt; instead of <.
HTML Sanitization
The process of removing or restricting unsafe markup. Sanitization is different from ordinary HTML entity encoding.
Output Context
The location where data will be inserted, such as HTML text, an HTML attribute, JavaScript, CSS or a URL. Different contexts can require different escaping strategies.
Frequently Asked Questions
What is HTML encoding?
HTML encoding replaces characters that have special meaning in HTML with entity or character-reference representations so they can be treated as text rather than markup.
What is HTML decoding?
HTML decoding converts recognised entities such as &, < and numeric character references back into their corresponding characters.
What does & mean?
& is the named HTML entity representing an ampersand character.
What does < mean?
< represents the less-than character <.
What does > mean?
> represents the greater-than character >.
What does " mean?
" represents a double quotation mark.
How do I display HTML code without rendering it?
Encode markup-sensitive characters such as < and > so tags appear as text. For example, <div> can be represented as <div>.
What is <?
< is a decimal numeric character reference for the less-than character because its Unicode code point is 60 in decimal.
What is <?
< is the hexadecimal numeric character reference for the less-than character.
What is the difference between named and numeric HTML entities?
Named entities use readable names such as &, while numeric character references use a decimal or hexadecimal Unicode code point such as & or &.
Can numeric entities represent Unicode characters?
Yes. Numeric character references can represent Unicode code points supported by HTML.
Is HTML encoding the same as URL encoding?
No. HTML encoding addresses HTML markup syntax while URL encoding addresses URI syntax. An ampersand may become & in HTML but %26 when encoded as a URL component.
Is HTML encoding the same as Base64?
No. HTML encoding escapes markup-sensitive characters. Base64 is a binary-to-text representation used for entirely different purposes.
Is HTML encoding encryption?
No. HTML entity encoding is easily reversible and should not be used to hide or protect sensitive information.
What is double HTML encoding?
Double encoding happens when already encoded content is encoded again. For example, < can become &lt; because the ampersand from the first entity is escaped on the second pass.
How do I fix &lt;?
If the content is genuinely double encoded, decoding it once produces < and decoding it again produces <. You should first confirm how many encoding layers were intentionally applied.
Does HTML encoding prevent XSS?
Correct contextual output escaping is an important defence against cross-site scripting, but security depends on where the value is inserted. HTML text, attributes, URLs, JavaScript and CSS are different contexts, and encoding alone should not be confused with complete HTML sanitization.
Does Laravel Blade encode HTML automatically?
Normal Blade output using {{ }} escapes HTML by default. Raw Blade output using {!! !!} does not perform that normal escaping and therefore requires trusted or appropriately sanitized content.
Should I manually HTML encode database values before saving them?
Usually applications store the original data and perform the correct contextual escaping when rendering output. Pre-encoding stored data can lead to double encoding and makes reuse in other contexts more difficult.
Should every quotation mark be HTML encoded?
Not necessarily. The characters that need escaping depend on the output context. Quotes are especially significant when untrusted data is inserted into HTML attributes.
Can this tool decode named HTML entities?
Yes. The browser implementation is designed to use HTML parsing behaviour capable of decoding recognised named entities.
Can this tool decode decimal entities?
Yes. Decimal numeric character references such as © can be converted back into their Unicode characters.
Can this tool decode hexadecimal entities?
Yes. Hexadecimal character references such as © can be converted back into their corresponding Unicode characters.
Does SwiftVecto send my HTML input to the server?
The interactive HTML Encoder / Decoder is designed to perform normal encoding and decoding directly inside your browser.
Is the HTML Encoder / Decoder free?
Yes. SwiftVecto provides this developer utility for encoding and decoding HTML entities and character references.
Things to Know
- The tool supports both encoding and decoding operations.
- Named entity encoding is primarily intended for common HTML-sensitive characters.
- Decimal numeric mode uses Unicode code points expressed in base 10.
- Hexadecimal numeric mode uses Unicode code points expressed in base 16.
- Decoding should support recognised named entities and numeric character references.
- Selective encoding options allow users to control common characters such as &, <, >, double quotes and single quotes.
- HTML encoding is context-specific and is not interchangeable with URL encoding.
- HTML encoding does not encrypt the input.
- Normal interactive conversion is intended to happen directly inside the browser.
Disclaimer
HTML entity encoding is not a substitute for complete application security or HTML sanitization.
Correct escaping depends on the output context in which data is inserted.
Developers should prefer framework-provided contextual escaping mechanisms for production application output.
Decoded HTML may contain active markup. Do not inject decoded untrusted content directly into the DOM using unsafe APIs such as innerHTML without appropriate sanitization.
Users remain responsible for validating output handling against the security requirements of their application.
Official References
The following official resources were used when developing this tool and are useful for further reading.