Frontend

HTML Entities Explained: When to Use <, >, & and Quotes

Ever tried to display <div> on a web page and watched it vanish — or worse, break your layout? That's HTML entities at work. This guide covers what they are, the 5 characters you must always escape, when encoding prevents XSS, and how to encode in JavaScript, Python and C#.

What Are HTML Entities?

An HTML entity is a piece of text that starts with an ampersand (&) and ends with a semicolon (;). Browsers replace the entity with the character it represents. Entities exist because some characters have special meaning in HTML — if you type them literally, the browser interprets them as markup instead of displaying them.

You write:      <div>
Browser shows:  <div>

There are two forms:

• Named entities — readable names like © (©),   (non-breaking space), ♥ (♥)
• Numeric entities — the Unicode code point, like © or hex © for ©. These work for every Unicode character, even ones without a name.

The 5 Characters You Must Always Escape

Character	Entity	Why it's dangerous
<	&lt;	Starts an HTML tag
>	&gt;	Ends an HTML tag
&	&amp;	Starts an entity — unescaped, it corrupts text
"	&quot;	Breaks out of double-quoted attributes
'	&#39;	Breaks out of single-quoted attributes

Order matters when encoding manually: always escape & first. If you escape < to < and then escape ampersands, you'll corrupt it into < — the classic double-encoding bug.

When Do Developers Actually Need This?

• Showing code on a page — blog posts, docs and tutorials that display HTML, JSX or XML snippets
• Rendering user input — comments, usernames, search terms. Unescaped input is the classic XSS vector: <script>steal()</script> executes; <script> just displays.
• URLs in attributes — query strings like ?a=1&b=2 must be written ?a=1&b=2 inside href
• Email templates and CMS editors — anywhere raw HTML is allowed and your snippet should display, not render

Entity Encoding vs Sanitization

These solve different problems and developers often confuse them:

• Encoding converts every special character so the whole string displays as plain text. Nothing renders, nothing executes. Use it when the text should never be HTML.
• Sanitization parses HTML and removes dangerous parts while keeping safe formatting like <b> or <a>. Use it when users are allowed limited rich text — and always use a maintained library (DOMPurify in JS, bleach in Python), never regex.

Rule of thumb: encode by default; sanitize only when you deliberately want some HTML to render.

How to Encode HTML Entities in Code

JavaScript — the safest trick uses the DOM itself:

function encodeEntities(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}
encodeEntities('<div>Tom & Jerry</div>');
// "&lt;div&gt;Tom &amp; Jerry&lt;/div&gt;"

In React, JSX escapes text content automatically — entities only matter when you use dangerouslySetInnerHTML (which is the hint to avoid it).

Python — built into the standard library:

import html
html.escape('<div>Tom & Jerry</div>')
# '&lt;div&gt;Tom &amp; Jerry&lt;/div&gt;'
html.unescape('&lt;div&gt;')   # '<div>'

C# — use System.Net.WebUtility:

using System.Net;
WebUtility.HtmlEncode("<div>Tom & Jerry</div>");
// "&lt;div&gt;Tom &amp; Jerry&lt;/div&gt;"
WebUtility.HtmlDecode("&lt;div&gt;");  // "<div>"

For quick one-off jobs — escaping a snippet for a blog post or fixing double-encoded text — skip the code entirely and use our free HTML Entity Encoder. It runs in your browser, so nothing you paste is uploaded anywhere.

Common Mistakes

• Double encoding — encoding already-encoded text, producing <. If you see & on a live page, decode once and fix the pipeline so encoding happens exactly one time, at output.
• Encoding in the wrong context — entity encoding protects HTML body and attributes. Inside <script> blocks use JavaScript escaping; inside URLs use percent-encoding (encodeURIComponent).
• Encoding too early — store raw text in your database and encode at render time. Encoding before storage leads to double encoding and broken search.
• Overusing   for layout — non-breaking spaces are for typography (keeping "10 km" together), not spacing. Use CSS for layout.

Frequently Asked Questions

Do I need to escape characters like é or 中 as entities?
No — if your page is UTF-8 (it should be), you can write Unicode characters directly. Entities are only required for the 5 special characters, and optionally for characters you can't type.

Is ' safe to use for apostrophes?
It works in HTML5 and XML but not in old HTML4 parsers. ' works everywhere, which is why encoders prefer it.

Does entity encoding fully prevent XSS?
It prevents XSS in HTML body and quoted attribute contexts. Script blocks, event handlers, URLs and CSS need their own context-specific escaping — that's why frameworks handle it for you.

Why does my RSS feed or API show & in titles?
The text was HTML-encoded before being placed in a context that doesn't render HTML. Decode it with the HTML Entity Decoder or your language's unescape function.

Paste any text or code snippet and convert <, >, & and quotes to safe HTML entities — or decode them back. Runs 100% in your browser.

HTML Entity Encoder/Decoder →