What are HTML entities?

Understanding HTML Entities

HTML entities are special codes used to represent characters that have a reserved meaning in HTML or characters that are not easily typed from a keyboard. They ensure that these characters display correctly in a web page.

Key Points

1
They start with an ampersand (&) and end with a semicolon (;).
2
Some represent reserved HTML characters, like <, >, &, which otherwise would be interpreted as HTML tags or syntax.
3
Others represent special symbols, accented letters, or Unicode characters.

Common HTML Entities

1
< → < (less than)
2
> → > (greater than)
3
& → & (ampersand)
4
" → " (double quote)
5
' → ' (single quote)
6
→ non-breaking space

Example Usage

In short: HTML entities allow you to safely display reserved characters, special symbols, or accented letters in your web pages.

Difficulty: 2/10

Topics: character encoding, XSS prevention, reserved characters

Scenario Questions

0-2 years experience

1
You're building a comment section where users can post text. A user submits 'I love <script>alert(1)</script> and AT&T'. What happens if you render this directly into innerHTML, and how would you fix it using HTML entities?
2
A designer sends you copy containing 'Price: $19.99 — 50% off!' with an em dash and special quotes. The page shows garbled characters. What entities would you use to display this correctly, and how would you verify the fix?

2-5 years experience

1
Your team migrates a legacy PHP template to a React app. The old code used htmlspecialchars() everywhere. In React you see dangerouslySetInnerHTML being used with user data. Why is this dangerous, and how would you refactor it to leverage React's built-in escaping?
2
A bug report: user-submitted emoji (🎉) renders as in the admin dashboard but works fine on the public site. Both use the same database. Walk me through how you'd debug whether this is an entity encoding issue, a charset mismatch, or something else.

5-8 years experience

1
You're designing a CMS that stores rich text from a WYSIWYG editor. The editor outputs HTML with entities already encoded (e.g., <b>bold</b>). Should you double-encode on save, decode on render, or store raw? What are the security and maintenance tradeoffs of each approach?
2
A high-traffic page renders 10k user comments server-side. Profiling shows HTML entity encoding takes 15% of response time. How would you optimize this without losing XSS protection? Consider caching, streaming, or client-side strategies.

8+ years experience

1
Your org has 50+ micro-frontends owned by different teams, each with their own encoding utilities. A security audit finds inconsistent entity handling leading to stored XSS in three apps. How would you establish a cross-team encoding standard, enforce it, and handle legacy code that can't be rewritten immediately?
2
You're leading a migration from a 15-year-old ISO-8859-1 codebase to UTF-8. The database contains mixed entity representations: some characters stored as named entities (é), some as numeric (é), some as raw bytes. Design a migration strategy that guarantees no data corruption and zero downtime.

Follow-up Questions

❓What's the difference between named and numeric entities?
❓When would you choose server-side vs client-side encoding?
❓How do modern frameworks like React handle this automatically?