HTML Entities and Character References: Escape Correctly in Markup

HTML is text with special characters. Angle brackets open tags, ampersands start character references, and quotes delimit attributes. When user content or CMS copy hits those characters unescaped, browsers parse markup you never intended — broken layouts at best, XSS at worst. HTML entities (character references) are how you keep text as text. Knowing which entity to reach for — and when encoding is the wrong layer — is core frontend hygiene.

Bottom line: Escape &, <, >, ", and ' in the right contexts; prefer clear named or numeric references when you need literal symbols; never "encode" as a substitute for proper HTML sanitization of rich text. Look up symbols with HTML Entity Lookup, transform bulk text with HTML Entities, and confirm file/content types with MIME Type Lookup when the same payload moves across HTML, email, and APIs.

Who this guide is for

Frontend developers who render user-generated content, build email templates, or debug "why does & show up twice?" If you paste Word docs into CMS fields or assemble HTML strings in JS, this guide maps the rules that prevent double-encoding and injection.

What an HTML entity is

A character reference is a textual stand-in for a Unicode character in HTML:

Form	Example	Notes
Named	  © &	Easy to read; finite set
Decimal numeric	 	Works for any code point
Hex numeric	 	Same as decimal, hex form

The browser decodes references when parsing HTML into the DOM. The DOM's text nodes hold real Unicode — not the entity source — unless you inspect innerHTML and see re-serialized escapes.

The five characters that matter most

For text content inside elements:

Char	Entity	Why
&	&	Starts every reference; must be escaped when literal
<	&lt;	Starts tags
>	&gt;	Often escaped for symmetry / legacy
"	&quot;	Critical inside double-quoted attributes
'	&#39; or &apos;	Critical inside single-quoted attributes

In modern HTML, ' is fine; older XHTML habits vary. In JS, prefer APIs that set textContent or use framework escaping so you do not hand-roll attribute rules.

Context matters

• Text node: escape < and & at minimum
• Attribute value: also escape the quoting character you use
• <script> / <style>: HTML entity rules are the wrong tool — these are special contexts with their own parsing; do not assemble JS with HTML escapes alone
• URL in href: use URL encoding, not HTML entities, for query bytes; still escape & in the HTML source as & between query params

Named entities you will actually type

Entity	Character	Use
 	non-breaking space	Prevent awkward wraps (sparingly)
— / –	— / –	Typography in CMS content
“ ”	“ ”	Curly quotes in prose
© ® ™	© ® ™	Legal lines
× ·	× ·	UI separators
→	→	Lightweight indicators

When you forget a name, search by symbol or code point in HTML Entity Lookup instead of guessing from memory.

Encode vs decode workflows

Encode when you take plain text and need safe HTML source:

Tom & Jerry → Tom & Jerry

Decode when you have HTML source or CMS output and need the readable string:

Tom & Jerry → Tom & Jerry

Double-encoding is the classic CMS bug: & appears in the UI. It happens when escaped content is escaped again on save. Fix the pipeline — only escape at the boundary that emits HTML — and use an HTML entity encoder/decoder to inspect suspicious strings locally.

XSS: entities help, sanitizers decide

Escaping untrusted text as HTML text/attributes is a correct default for plain text. It is not enough when you intentionally allow markup (Markdown, WYSIWYG, email HTML):

• Escaping everything destroys legitimate tags
• Allowing raw HTML without a sanitizer invites script injection
• javascript: URLs and event handlers are not solved by < alone

Use a vetted sanitizer library for rich HTML. Use entity encoding for plain strings. Do not invent a half-escape that blocks <script> but allows <img onerror=…>.

Email HTML and "weird" characters

Email clients are inconsistent. Named entities for common symbols are widely supported; exotic named entities may not be. Numeric references (…) are safer for unusual punctuation. Keep DOCTYPE and charset (UTF-8) correct so you are not forced into entity soup for ordinary Unicode — with UTF-8, you can often paste real characters and only escape the HTML syntax set.

Where MIME types enter the picture

Entities live in HTML text. MIME types describe how a payload should be interpreted end-to-end:

Scenario	Risk if wrong
Serving HTML as text/plain	Entities show as literal source
Serving user uploads as text/html	Stored XSS
Email multipart parts	Wrong Content-Type / charset breaks Unicode
Clipboard / export "HTML"	Consumer may expect plain text

When debugging "entities visible on screen" or "browser downloads instead of renders," check both escaping and the declared type. A quick MIME Type Lookup helps confirm that .html → text/html, .txt → text/plain, .csv → text/csv, and that you are not guessing from the file extension alone. Deep Content-Type header practice (uploads, APIs, charset parameters) deserves its own pass — the companion focus is headers and responses — but entity bugs and MIME mismatches often show up together in CMS and email work.

Practical recipes

1. User comment as plain text: set textContent / framework text binding (auto-escape).
2. CMS body that allows markup: sanitize server-side; do not double-escape on render.
3. Debug visible &: decode once; find the extra encode step.
4. Need a rare symbol: look up the named or numeric reference; paste into source deliberately.
5. File downloaded from a ticket: confirm MIME/extension before opening as HTML.

Related tools

Use these codefunc tools alongside this guide:

• HTML Entity Lookup
• HTML Entity Encoder/Decoder
• MIME Type Lookup

Practical takeaway

Escape HTML syntax characters in the correct parsing context, use named or numeric entities for deliberate symbols, and fix double-encoding at the pipeline boundary. Entities are not a rich-text sanitizer. When content behaves like "wrong type" as much as "wrong escape," verify the media type too. For daily work, look up and transform entities in the browser with HTML Entity Lookup and HTML Entities, and confirm types with MIME Type Lookup — no data needs to leave your machine.

Sources

• HTML Living Standard — Character references
• MDN: Character escape references
• OWASP: Cross Site Scripting Prevention Cheat Sheet
• IANA — Media Types