How to Display HTML Code as Text Without Double Escaping

You paste an HTML example into a page and the tags disappear: the browser has interpreted them as markup. To display the example itself, escape its reserved characters before placing it in HTML source. If the destination already treats your input as plain text, paste the original snippet instead.

This guide uses a short example to distinguish those two situations, test the HTML Encoder and Decoder, and catch the common mistake of encoding the same content twice.

Decide whether you are editing source or plain text

In an HTML source file, <strong> introduces an element. A character reference represents the angle bracket as text so it can appear visibly. MDN explains the named and numeric forms in its character reference documentation.

A plain-text field is different. A code-example component or an editor may escape the input for you. First test with a small snippet in a preview. If the preview already shows literal angle brackets, adding entities manually can make the entity names appear on the page instead.

Encode a complete example once

Suppose a tutorial needs to show this original snippet:

<strong>Tea & "toast"</strong>

1. Open the HTML Encoder and Decoder and choose Encode special characters only.
2. Paste the original snippet, including its actual angle brackets and ampersand, into Input.
3. Press Convert. In our tool check, the result below contained seven encoded characters.
4. Copy the result into the source of your code example, inside a <pre><code> wrapper.
5. Preview the saved page and compare it with the original snippet.

The converter output, shown literally, is:

<strong>Tea & "toast"</strong>

The page should visibly show the original HTML example, rather than displaying bold text with no tags. Keep the wrapper as markup; escape only the example inside it.

Recognize double escaping before publishing

If you encode an existing < again, the ampersand becomes encoded too. The source now contains <, which displays as the literal sequence <. Seeing entity names where you wanted angle brackets is a useful clue that an extra encoding step occurred.

Return to the original input whenever possible. The tool’s Use output as input button switches to the reverse conversion, which lets you check the round trip. Its decoder recognizes a fixed named-entity table and numeric references; unfamiliar names can remain unchanged. Do not keep decoding repeatedly until something looks right, because a legitimate example may be discussing entity syntax itself.

Use plain-text insertion when writing JavaScript

If you control a JavaScript example panel, you can assign the original snippet to the element’s textContent. That treats it as text rather than parsing it as HTML. See MDN’s textContent reference for the distinction.

const example = document.querySelector('#example');
example.textContent = '<strong>Tea & "toast"</strong>';

Here, pass the original string. Passing an already escaped string to textContent would display the entity notation. HTML escaping also does not provide a general sanitizer for scripts, styles or every attribute context.

Finish with a destination check

• Compare the published example with the original, including quotes and ampersands.
• Check that intentional surrounding markup still works.
• Keep normal Unicode text as Unicode in a UTF-8 document unless your destination specifically requires numeric references.

URL values need a different encoding method. If your example includes query parameters, follow our query-parameter encoding guide rather than substituting HTML entities for percent encoding.