HTML Entities: All Special Characters + XSS Defense

📌 Key Takeaways

• HTML Entities: All Special Characters + XSS Defens is widely used by developers
• Based on RFC standards and real-world experience
• Free online tools, runs locally, no data upload
• FAQ section at the bottom answers common questions

1. Three Ways to Write an HTML Entity

• Named entity: < → less-than sign
• Decimal numeric: < → same less-than sign
• Hexadecimal numeric: < → same less-than sign

All three are equivalent. Named entities are easier to remember; numeric entities cover every Unicode character.

2. 15 Must-Know Entities

3. Three XSS Scenarios

User Input Injected Into HTML

// ❌ Dangerous: raw user input concatenation
element.innerHTML = userInput;

// ✅ Safe: textContent auto-escapes
element.textContent = userInput;

Unfiltered URL Parameters

// Always sanitize external input before injecting into HTML
const safe = DOMPurify.sanitize(new URLSearchParams(location.search).get('name'));
document.write(`<h1>Welcome ${safe}</h1>`);

Template Engine Auto-Escape Override

Vue/React auto-escape by default, but v-html / dangerouslySetInnerHTML bypass this. Only use with 100% trusted content. External input must always go through DOMPurify first.

4. Why Use   Instead of a Space?

HTML collapses consecutive whitespace by default — 3 spaces display as 1. Use   (non-breaking space) to preserve spacing. Common in paragraph indentation, price alignment (¥99 元), and preventing line breaks between related words.

5. Summary

Memorize the first four reserved characters (< > & ") and you'll handle 90% of HTML entity use cases. For XSS, remember the golden rule: escape or sanitize every piece of user input. Browse the full table at the DevToolbox HTML Entities Reference — 200+ characters with search and one-click copy.

Related: HTML Entities · URL Codec · Regex Tester