HTML Entities Guide: Encoding Special Characters for the Web

What Are HTML Entities?

HTML entities are special codes that represent characters you cannot safely type directly into HTML. They let you display reserved characters like < and > without confusing the browser's parser.

Every HTML document relies on entities — often without you noticing. If you've ever written & instead of a bare &, you've used an HTML entity.

Three Entity Formats

HTML supports three ways to write the same character:

Named entities are the easiest to read and remember. Numeric entities cover characters that lack a named equivalent — useful for rare symbols, emojis, and CJK characters.

Why three formats?

Named entities improve readability. Decimal and hexadecimal codes give you access to every Unicode code point, even those without assigned names. Hexadecimal is popular because it matches Unicode chart notation (e.g., U+00A9 = ©).

Why You Need HTML Entities

1. Prevent parsing errors

Characters like <, >, and & have structural meaning in HTML. Using them as data without encoding breaks the markup:

<!-- BROKEN: browser thinks this is a tag -->
<p>If x < y, then y > x</p>

<!-- CORRECT: entities protect the content -->
<p>If x &lt; y, then y &gt; x</p>

2. Display invisible or ambiguous characters

Some characters are invisible (non-breaking space) or ambiguous (soft hyphen). Entities make them explicit in your source code.

3. Defend against XSS

Encoding user-supplied output as HTML entities is a core XSS mitigation. When you convert <script> into <script>, the browser renders it as text instead of executing it.

4. Insert symbols and special characters

Copyright signs, currency symbols, math operators, and arrows all have entity codes that work reliably across encodings.

Common HTML Entities

Encoding and Decoding in JavaScript

Modern browsers provide built-in APIs for working with HTML entities:

Encoding (escaping)

function encodeHtml(text) {
  const el = document.createElement('div')
  el.textContent = text
  return el.innerHTML
}

encodeHtml('<script>alert("xss")</script>')
// "&lt;script&gt;alert(\"xss\")&lt;/script&gt;"

Setting textContent escapes all HTML-meaningful characters automatically. The browser handles <, >, &, " and more.

Decoding (unescaping)

function decodeHtml(entity) {
  const el = document.createElement('div')
  el.innerHTML = entity
  return el.textContent
}

decodeHtml('<p>Hello</p>')
// "<p>Hello</p>"

Writing to innerHTML parses the entities, and textContent retrieves the decoded text.

Server-side with Node.js

If you work outside the browser, use a library like he or html-entities:

import { encode, decode } from 'he'

encode('5 > 3 & 2 < 4')  // "5 &gt; 3 &amp; 2 &lt; 4"
decode('&copy; 2026')     // "© 2026"

Best Practices

1. Always encode user output. Any data you inject into HTML — from APIs, forms, or databases — needs entity encoding before rendering.
2. Prefer named entities for the big five. &, <, >, ", and ' cover the most critical characters. Use them for readability.
3. Use numeric entities for everything else. Symbols, emojis, and rare characters often lack named entities. Numeric codes work universally.
4. Don't double-encode. Encoding & again produces &, which renders as the literal text & instead of &.
5. Validate context. Entity encoding works inside HTML content. Inside JavaScript strings or CSS, you need different escaping strategies.

Key Takeaways

• HTML entities replace characters that would conflict with HTML syntax
• Three formats exist: named (&), decimal (&), and hexadecimal (&)
• Entity encoding is essential for preventing XSS and displaying special characters
• Use textContent for encoding and innerHTML + textContent for decoding in the browser
• Named entities improve readability; numeric entities offer full Unicode coverage
• Always encode user-supplied data before rendering it in HTML

Related Guides

• HTML Special Characters Reference
• HTML Encoding vs URL Encoding
• Percent-Encoding Reference

Try It Yourself

Encode and decode HTML entities instantly with our free HTML Entity Encoder/Decoder tool. Paste any text and get properly encoded output in one click.