Why escape HTML?
If you paste <button>Save</button> straight into a web page, the browser does not show the code — it draws a button. To display markup as text, the characters that start tags and entities have to be replaced: < with <, > with > and & with &. That process is called escaping, and it is what every tutorial, documentation page and Stack Overflow answer does behind the scenes.
This tool is built for exactly that job. It escapes the minimum set of characters so your code stays readable in the page source, can optionally convert tabs to spaces (tabs render eight columns wide in most browsers), and can wrap the result in <pre><code> with a language- class so syntax highlighters like Prism.js or highlight.js pick it up. Switch to Unescape to turn escaped snippets back into working code.
Escaping is different from entity encoding. The HTML Entity Encoder can convert any character — accents, symbols, emoji — into references, which is about character sets. Escaping only neutralises markup, which is about showing code.
How to use the HTML Escape Tool
- Choose Escape and paste the code you want to show, or click Sample.
- Tick Escape quotes too if the result will go inside an attribute value; for normal page content it is not needed.
- Optionally convert tabs to spaces and wrap the result in
<pre><code>or WordPress Code block markup, with a language class for syntax highlighting. - Copy the output into your post, a Custom HTML block or your docs. Use Swap to check the round trip in Unescape mode.
Example
Escaping a link with the <pre><code> wrapper and the html language class:
<a href="/blog?tag=css&sort=new">Blog</a>
→ <pre><code class="language-html"><a href="/blog?tag=css&sort=new">Blog</a></code></pre>Showing code in WordPress
The block editor’s Code block escapes what you type automatically, so paste raw code there, not escaped code — otherwise readers see < on the page. Escaping by hand is needed in the Custom HTML block, the Classic editor’s Text tab, widgets, theme templates and page builders that accept raw HTML.
- For a Custom HTML block, choose WordPress Code block as the wrapper: the output uses the same
<pre class="wp-block-code"><code>markup and picks up your theme’s code styling. - If a page shows
&lt;instead of<, the code was escaped twice. Unescape it once here, or use the HTML Entity Decoder with repeated decoding. - Long lines inside
<pre>do not wrap by default. Addwhite-space: pre-wrapin your CSS or let the block scroll horizontally.
Frequently Asked Questions
Which characters must be escaped in HTML?
In normal text content, & and < are the ones that can start markup; > is escaped as well for symmetry and readability. Inside an attribute value you must also escape the quote character that delimits it, which is what Escape quotes too does.
Is escaping enough to prevent XSS?
Escaping & < > " ' makes text safe in element content and quoted attributes. It does not make it safe inside <script>, style attributes, event handlers or URLs. For code samples on your own site that is fine; for user input in an application, rely on your framework’s context-aware escaping.
What is the difference between this and the HTML Entity Encoder?
This tool only neutralises markup characters, keeps everything else readable and adds code-block wrappers for publishing. The HTML Entity Encoder converts any character, including accents and emoji, into named or numeric references.
Why convert tabs to spaces?
Browsers render a tab inside <pre> as up to eight columns, so code indented with tabs looks far wider on the page than in your editor. Expanding tabs to two or four spaces keeps the layout you intended. The conversion respects tab stops, so aligned columns stay aligned.
Does unescaping decode every entity?
Unescape reverses &, <, >, ", ' and all numeric references in a single pass, which is what escaping produces. Named entities such as é are left alone; decode those with the HTML Entity Decoder.