🏷️ HTML Entities Reference: Complete Character Encoding Guide

HTML entities are essential for web developers. Whether you're displaying special characters, preventing XSS attacks, or working with multilingual content, understanding HTML entities is crucial.

This guide covers everything you need to know about HTML entities — what they are, when to use them, and a complete reference of common entities.

🤔 What Are HTML Entities?

HTML entities are character sequences that represent special characters in HTML. They start with & and end with ;.

Why Do We Need Them?

• Reserved characters: < and > are used for tags
• Special characters: & starts an entity
• Unprintable characters: Non-breaking space, etc.
• Security: Prevent XSS attacks by escaping user input
• International characters: Display any Unicode character

📝 Types of HTML Entities

1. Named Entities

&lt;     → <     (less than)
&gt;     → >     (greater than)
&amp;    → &     (ampersand)
&quot;   → "       (double quote)
&apos;   → '       (apostrophe)
&nbsp;   → (non-breaking space)
&copy;   → ©       (copyright)
&reg;    → ®       (registered trademark)
&trade;  → ™       (trademark)

2. Numeric Entities (Decimal)

&#60;    → <     (less than)
&#62;    → >     (greater than)
&#38;    → &     (ampersand)
&#34;    → "       (double quote)
&#169;   → ©       (copyright)
&#8364;  → €       (euro sign)

3. Numeric Entities (Hexadecimal)

&#x3C;   → <     (less than)
&#x3E;   → >     (greater than)
&#xA9;   → ©       (copyright)
&#x20AC;  → €       (euro sign)

📋 Essential HTML Entities Reference

Must-Escape Characters (Security)

Common Symbols

Whitespace & Special

Arrows

💻 Encoding in Code

JavaScript

// Encode HTML entities
function encodeHTML(str) {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

// Decode HTML entities
function decodeHTML(str) {
  const textarea = document.createElement('textarea');
  textarea.innerHTML = str;
  return textarea.value;
}

PHP

// Encode
$encoded = htmlspecialchars($string, ENT_QUOTES, 'UTF-8');

// Decode
$decoded = html_entity_decode($string, ENT_QUOTES, 'UTF-8');

Python

import html

# Encode
encoded = html.escape('<script>alert("XSS")</script>')

# Decode
decoded = html.unescape('&lt;script&gt;')

⚠️ Common Mistakes

1. Forgetting to escape in attributes: <img alt="&quot;test&quot;">
2. Double encoding: < instead of <
3. Missing semicolon: &lt (invalid)
4. Encoding in URLs: Use URL encoding, not HTML entities

✅ Best Practices

• Always escape user input before displaying in HTML
• Use a library for encoding/decoding (don't reinvent)
• Specify charset as UTF-8 in your HTML
• Use named entities when possible (more readable)
• Test with special characters in your language

🔗 Conclusion

HTML entities are a fundamental part of web development. They ensure your content displays correctly, prevents security vulnerabilities, and allows you to use any character in your HTML documents.

Bookmark this reference for quick lookup, and remember: when in doubt, encode it!