HTML Entities Explained: Escape Markup So Your Text Renders, Not Executes

You paste a snippet of code into a page and the browser eats half of it. Or worse, you drop user text into HTML and a stray <script> tag actually runs. Both problems have the same root: certain characters mean something structural in HTML, and to display them literally you have to escape them as entities.

How HTML entities work

An HTML entity is a stand-in code that the browser renders as a single character. They start with & and end with ;. Some are named, some are numeric:

• & → & (ampersand)
• < → < (less-than)
• > → > (greater-than)
• " → " (double quote)
• ' → ' (apostrophe, numeric form)

You need entities in two situations: to show a character that would otherwise be parsed as markup (the angle brackets, the ampersand), and to safely display any untrusted text so it can't inject tags. The five characters above are the essential set for HTML content and attribute values.

Order matters more than you'd think

When you escape by hand, the ampersand must go first. Escape it after the others and you'll double-encode the entities you just created:

function escapeHtml(s) {
  return s
    .replace(/&/g, '&')   // must be first!
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

escapeHtml('Tom & Jerry <b>');
// "Tom &amp; Jerry &lt;b&gt;"

If you escaped < first and & last, the & in < would itself get replaced, producing the broken <. The HTML Entity Encoder handles this ordering for you and works entirely in your browser, so you can paste real content — including internal strings — without it leaving your machine.

A practical walkthrough

Suppose you're writing a tutorial and want to show a literal tag on the page. Type the raw markup, encode it, and paste the entities into your source:

Input:  <a href="?x=1&y=2">link</a>

Encoded:
&lt;a href=&quot;?x=1&amp;y=2&quot;&gt;link&lt;/a&gt;

Now the browser prints the tag as text instead of turning it into a real link. To go the other way — you've been handed an entity-laden string and want the readable original — the same tool decodes (unescapes) it back to plain characters.

Common pitfalls

Escaping is context-specific. HTML entity encoding is not the same as URL encoding or JavaScript string escaping, and using one where another belongs leaves a hole.

• Don't rely on manual escaping for security. For real XSS defense, use your framework's auto-escaping (React, Vue, and template engines escape by default). Entity encoding is one layer, not a complete strategy.
• Attributes need quotes escaped. A double quote inside a double-quoted attribute closes it early. Escape " to " (or ' to ') inside attribute values.
• Don't double-encode. Running already-escaped text through an encoder again gives you visible < on the page. Decode first if you're unsure of the input's state.
• Numeric vs named. ' is safer than ' in older HTML because ' isn't defined in the HTML4 named set.

Related tools

If your snippet is destined for a URL rather than page content, reach for the URL Encode / Decode tool instead — different escaping rules entirely. And when you're escaping quotes and backslashes for a string literal in code, the Backslash Escape / Unescape tool covers that context.

Conclusion

HTML entities let text and markup coexist: escape & < > " and ' so the browser displays them instead of parsing them. Encode ampersands first, decode exactly once, keep entity encoding separate from URL and JavaScript escaping, and lean on your framework for the security-critical path.