HTML pages are built out of tags and content. Tags start with a less than sign and end with a greater than sign. Browsers know to treat anything between angle brackets as instructions, not as text to display. That works perfectly until you actually want to show angle brackets as text. Or you want to display an ampersand. Or someone types HTML into a comment field and your page suddenly has a stray button in the middle of it.
HTML encoding solves all of those problems. This article explains what it is, the few characters you need to know about, and how to use the DevHexLab HTML Encoder to handle any case safely.
What Is HTML Encoding?
HTML encoding (sometimes called HTML escaping) is the act of converting certain special characters into named entities that the browser treats as literal text. The result looks slightly different in the source but renders as the original character on screen.
The most important characters to know are the less than sign, the greater than sign, the ampersand, the double quote, and the apostrophe. These are the characters that have special meaning in HTML.
When you encode a less than sign, it becomes the entity that starts with ampersand and reads as lt followed by a semicolon. When you encode a greater than sign, it becomes the entity that reads as gt followed by a semicolon. The ampersand itself becomes the entity that reads as amp followed by a semicolon. The double quote becomes the entity that reads as quot followed by a semicolon. The apostrophe usually becomes the entity that reads as apos followed by a semicolon, or in older HTML the numeric entity for character 39.
Every modern browser reads those entities and renders the original character. So the encoded version is safe to put inside HTML content because the browser will not try to interpret it as markup.
Why HTML Encoding Matters
There are three main reasons developers need to encode HTML.
Showing HTML code as text on a page
If you are writing a tutorial about HTML (like this very site), you sometimes need to show actual HTML markup as text. You cannot just paste an angle bracket into the page because the browser will try to render whatever comes next as a tag. Encoding the angle brackets turns them into literal text.
Preventing user input from breaking the page
Any time your application displays content that came from a user (comments, profiles, search results, anything), that content has to be encoded before it goes into the HTML. Otherwise a user typing an angle bracket can accidentally close your tags or open new ones, breaking the layout.
Preventing cross site scripting attacks
The most serious reason to HTML encode is security. If a user can put a script tag into a comment and your site displays the raw text, that script will run in every other user's browser. This is called a cross site scripting attack, or XSS. Encoding user input before displaying it prevents the browser from interpreting any of it as code, no matter how clever the attacker is.
This is why every modern web framework (React, Vue, Angular, Blazor, Django, Rails, Laravel, ASP.NET) encodes interpolated values by default. The framework is doing this work for you, but if you ever bypass it (with dangerouslySetInnerHTML in React, for example, or with the safe filter in Django), you become responsible for encoding manually.
When You Need to Encode Manually
In a well configured framework you rarely need to encode by hand. But there are several situations where you do.
Building HTML strings outside the framework
If you are generating an HTML email, a PDF from HTML, a static report, or a page in plain server code without a templating engine, every interpolated value needs to be encoded.
Working with raw HTML in a CMS or rich text editor
If your CMS lets editors paste raw HTML and you want to show some of it as text (like in a code example block), encode the parts that should remain visible.
Constructing dynamic attribute values
When you build attribute values manually (like a title attribute), special characters inside the value need to be encoded. A double quote inside a double quoted attribute will end the attribute early.
Migrating data from one system to another
If you are exporting content from one platform and importing into another, encoding may be applied or stripped during the transfer. Knowing how to encode and decode manually lets you fix data that was processed incorrectly.
How to Use the DevHexLab HTML Encoder
Open the HTML Encoder on DevHexLab. Paste the text or HTML snippet you want to encode into the input box. The tool encodes the special characters as you type and shows the result in the output area.
By default it only encodes the five most important characters: less than, greater than, ampersand, double quote, and apostrophe. That is enough for almost every situation.
If you need to be more aggressive (for old systems, for transport over very strict channels, or for paranoid security), toggle the option to encode every non ASCII character. Every accented letter, every symbol, and every emoji becomes a numeric entity. The result is longer but works in even the most ancient HTML parser.
Click Copy to grab the encoded result. Paste it into your HTML, your email template, your generated PDF, or wherever it needs to go.
Everything happens in your browser. No data is sent to a server.
HTML Encoding vs Other Encodings
It is easy to confuse HTML encoding with similar sounding things. Here is how it differs from each.
HTML encoding vs URL encoding
URL encoding turns characters into percent followed by hex digits, like %20 for a space. It is used inside URLs. HTML encoding turns characters into named entities, like the entity for less than or the entity for ampersand. It is used inside HTML content. The two formats are completely different and not interchangeable.
HTML encoding vs Base64
Base64 transforms every byte of input into a longer text representation. It is used to safely carry binary data through text channels. HTML encoding only changes specific characters that conflict with HTML syntax and leaves everything else alone.
HTML encoding vs XML encoding
XML uses the same five entities as HTML (lt, gt, amp, quot, apos). For these basic characters they are identical. HTML supports many more named entities for symbols (like the entity for copyright, the entity for trademark, etc), while XML uses numeric entities for everything beyond the basic five.
Common Pitfalls
Encoding twice
If you take an already encoded string and encode it again, the ampersand at the start of each entity becomes encoded too. You end up with the entity for amp in front of every entity. The result displays as visible entity references rather than the intended character. If you see literal entity codes on a page, the content has probably been encoded twice. Decode it once to fix it.
Forgetting to encode the ampersand
When developers manually encode HTML, they often remember to encode less than and greater than but forget the ampersand. This causes problems when the content includes a real ampersand (in a name like "Mom and Dad" written with the ampersand symbol, or in a URL query string).
Mixing encoding and Markdown
Markdown is converted to HTML by a Markdown processor. If you encode HTML special characters in your Markdown source, the processor sees the entities, not the original characters, and the output is double encoded. Either write plain Markdown and let the processor encode, or write raw HTML directly.
Trusting client side encoding for security
HTML encoding done in the browser does not protect you from attackers who craft requests directly. Always encode (or use a framework that encodes) on the server before sending HTML to the client.
Frequently Asked Questions
Do I need to encode if I use a modern framework?
Usually no. React, Vue, Angular, Blazor, Svelte, and most modern frameworks encode interpolated values by default. The only time you need to encode by hand is when you bypass that default safety with a feature like dangerouslySetInnerHTML.
Can I encode using named entities or numeric entities?
Both work in every modern browser. Named entities (like the one for less than) are more readable. Numeric entities (like the one that starts with ampersand and hash and a number) are more universal because every Unicode character has a numeric entity. Pick named for readability and numeric for maximum compatibility.
How do I encode just one character, not all of them?
The DevHexLab encoder always encodes all of the dangerous characters together (less than, greater than, ampersand, double quote, apostrophe) because partial encoding is rarely safe. If you really need to encode just one character, you can write the entity by hand.
What characters become an entity that includes the word amp?
The ampersand character itself is encoded as the entity that includes the word amp followed by a semicolon. This is the entity all other named entities start with. Always remember to encode literal ampersands when manually encoding HTML.
Encode and Be Safe
HTML encoding is a small, mechanical step that prevents a surprising number of bugs and security holes. Most of the time a framework does it for you. When you need to do it by hand, do not guess. Open the DevHexLab HTML Encoder, paste your content, copy the safe version, and move on.