HTML escape: show markup as text
An HTML escape turns the characters that the browser treats as markup into character references. Once a string has been escaped, <b> is displayed as the four characters you typed rather than switching on bold text. This tool performs that HTML escape on any text you paste, instantly and entirely in your browser.
You need it whenever raw text ends up inside an HTML document: code samples in a blog post, error messages printed on a page, values echoed back from a form, or snippets pasted into a CMS that does not escape for you.
Which characters are escaped
Only five characters have a special meaning in HTML text and attribute values, so only these five are changed. Everything else — letters, digits, emoji, accented characters — is left exactly as it was.
| Character | Becomes | Why |
|---|---|---|
& | & | Starts every entity, so it must be escaped first |
< | < | Opens a tag |
> | > | Closes a tag; escaped for symmetry and safety |
" | " | Ends a double-quoted attribute value |
' | ' | Ends a single-quoted attribute value |
The single quote uses the numeric reference ' rather than ', because ' was not defined in HTML 4 and some older parsers do not recognise it. The numeric form works everywhere.
Example
Input:
<a href="/search?q=tom&jerry" title='Tom's'>5 > 3</a>Escaped output:
<a href="/search?q=tom&jerry" title='Tom's'>5 > 3</a>Paste the output into a page and the visitor sees the original anchor tag as text, including the ampersand in the query string.
HTML escaping and XSS
Cross-site scripting (XSS) happens when user-controlled text is inserted into a page without escaping, so a value like <script>…</script> runs as code. Escaping the five characters above neutralises this for the two most common places data lands: element content and quoted attribute values.
Escaping is context-specific, though. HTML escaping on its own does not make a value safe in these places:
- Unquoted attributes such as
<div class=VALUE>— a space is enough to start a new attribute. Always quote attributes. - URLs in
hreforsrc— ajavascript:URL contains no special HTML characters at all. Validate the scheme instead. - Inside
<script>or event handlers such asonclick— use JavaScript or JSON escaping for that context. - Inside
<style>or inline CSS — use CSS escaping or, better, avoid putting untrusted data there.
In application code, rely on your template engine’s automatic escaping (Blade {{ }}, Twig, Jinja2, React JSX and Angular all escape by default) and use this tool for content you are writing by hand. For one-off tasks it is also handy for checking what a framework should be producing.
Escape vs. encode vs. unescape
This tool escapes the minimum set of characters and keeps non-ASCII text readable. If you need every accented letter or symbol converted to named entities such as é — for example for an email template or an old ISO-8859-1 page — use the HTML Encoder instead. To reverse the process and turn entities back into characters, use HTML Unescape. For XML documents, where the rules are slightly different, use XML Escape.
Common mistakes
- Double escaping. Running escaped text through an escaper again produces
&lt;, which shows up on the page as<. Escape once, at the moment you output the value. - Escaping on input. Store the original text in your database and escape when rendering. Escaped data is awkward to search, truncate or reuse in non-HTML outputs such as JSON or CSV.
- Forgetting the ampersand. A hand-written replace that skips
&, or handles it last, corrupts entities that already exist in the text. This tool handles all five characters in a single pass.
Privacy
The escaping runs locally with JavaScript. Your text is not uploaded, so you can safely escape snippets from private projects.