HTML Encode

What the HTML Encode tool does

This converts the special characters in your text into their HTML entities, the safe stand-ins that a browser shows as plain text instead of treating as code. Type or paste your text, press Convert, and copy or download the result. For example, a less-than sign < becomes &lt; and an ampersand & becomes &amp;, so the browser prints the actual symbol rather than trying to read it as part of the page.

It runs in your browser, so nothing you enter is uploaded.

How to use it

1. Enter your text. Type or paste it, including any special characters.
2. Press Convert. The encoded version appears, ready to Copy or Download.

What HTML encoding is

HTML is built out of a few characters that carry special meaning. The angle brackets < and > mark the start and end of tags, the ampersand & begins an entity, and quotation marks wrap attribute values. That is a problem whenever you want one of those characters to appear as ordinary text, because the browser will try to act on it instead of showing it. The answer is to swap the character for an entity, a short code the browser understands as "show this symbol, do not act on it." The common ones have friendly names: & becomes &amp;, < becomes &lt;, > becomes &gt;, and a double quote becomes &quot;. Characters without a name get a numeric code instead, like &#39; for an apostrophe. Either way, the symbol shows up correctly and the page stays intact.

Why it matters: showing text and staying safe

There are two reasons you reach for this. The first is simple display. If you are writing a tutorial and want to show a snippet of HTML on the page, you have to encode it, or the browser will render the example instead of printing it. Encoding lets the code appear as text for the reader to see.

The second reason is safety, and it is the more important one. Any time a website takes text from a user, a comment, a name, a search term, and places it into a page, that text could contain HTML or a script. If it is dropped in raw, a malicious visitor could sneak in tags that run code in other people's browsers, which is the root of a whole class of attacks. Encoding the special characters first neutralises that, because the browser then treats the input as text to display rather than markup to run. One honest caveat: encoding is a key part of handling untrusted content safely, but the right kind of encoding depends on where the text is going, whether into the body of a page, into an attribute, or elsewhere, so think of it as an essential ingredient of safe handling rather than a single switch that covers everything.

It is not the same as URL encoding

This trips people up often enough to be worth stating plainly. HTML encoding and URL encoding both turn special characters into codes, but they solve different problems and are not interchangeable. HTML encoding, the kind here, makes text safe to place inside a web page, using entities like &lt;. URL encoding makes text safe to place inside a web address, using percent codes like %20, and is handled by the URL Encoder tool. If you put HTML entities into a URL, or percent codes into a page, neither works. Pick the one that matches where the text is going.

The library doing the work

The encoding is handled by he, a well-regarded HTML entity library written by Mathias Bynens. It uses the friendly named entities where they exist and numeric codes where they do not, and it is careful to encode only the characters that actually need it, rather than scrambling your whole text, so the output stays as readable as possible.

Going the other way

If you have encoded HTML and want the plain text back, that is the opposite job, handled by the HTML Decode tool. This one turns special characters into entities; that one turns entities back into characters.

Questions people ask

Which characters get encoded?

The ones that have special meaning in HTML, chiefly the angle brackets, the ampersand, and quotation marks, plus anything else that needs a code to display safely. Ordinary letters and digits are left as they are.

What is the difference between &lt; and &#60;?

They are two ways to write the same character. The first is a named entity, easier to read, and the second is a numeric code. This tool prefers names where they exist and uses numbers otherwise.

Does encoding make my site safe from attacks?

It is a major part of it. Encoding user-supplied text before putting it in a page stops that text from injecting markup or scripts. The correct encoding depends on where the text goes, so treat it as essential but not the whole of security.

Is this the same as URL encoding?

No. HTML encoding makes text safe inside a web page, while URL encoding makes text safe inside a web address. Use the URL Encoder tool for the latter.

References

1. Bynens, M. he: A robust HTML entity encoder/decoder (npm package). https://www.npmjs.com/package/he
2. WHATWG. HTML Standard, Named character references. https://html.spec.whatwg.org/multipage/named-characters.html