Entities, Symbols, Emojis & Charset
Display reserved characters, special symbols and emojis correctly — and never see “�” again.
What you will learn
- Use HTML entities for reserved characters
- Insert symbols and emojis
- Understand why UTF-8 matters
Reserved characters need entities
Some characters are reserved. The browser thinks < starts a tag. To show it literally, use an entity — a code that starts with & and ends with ;.
| You want to show | Type this entity |
|---|---|
| < (less than) | < |
| > (greater than) | > |
| & (ampersand) | & |
| © (copyright) | © |
| ® (registered) | ® |
| a non-breaking space | |
<p>To write a tag in text, type <p> like this.</p>
<p>© 2026 CodingClave & Friends</p>
<p>5 < 10 and 10 > 5</p>Each entity is replaced by one real character: < becomes <, > becomes >, & becomes &, and © becomes ©. So we can safely *show* a <p> tag as text instead of the browser trying to run it as a real tag.
Note: Output: To write a tag in text, type <p> like this. © 2026 CodingClave & Friends 5 < 10 and 10 > 5
Symbols and emojis
You can paste symbols (★ ₹ → ✓) and emojis (🎉 🚀 ❤️) directly into your HTML. They work as long as your page uses UTF-8.
<p>Rating: ★★★★☆</p>
<p>Price: ₹499 only →</p>
<p>We love teaching! 🎉🚀❤️</p>These stars, the rupee sign, the arrow and the emojis were pasted straight into the text — no entity codes needed. They display correctly because the page uses UTF-8 (covered just below), the character set that understands almost every symbol and emoji.
Note: Output: Rating: ★★★★☆ Price: ₹499 only → We love teaching! 🎉🚀❤️
Why UTF-8?
The <meta charset="UTF-8"> tag in your <head> tells the browser which character set to use. UTF-8 supports almost every character and emoji on Earth.
Watch out: If symbols or emojis show as boxes or “�”, your page is missing <meta charset="UTF-8"> — add it to the <head>.
Q. How do you correctly display a literal "<" character on the page?
✍️ Practice
- Display the text “if (x < 5 && y > 2)” correctly using entities.
- Make a 5-star rating line using ★ and ☆ symbols.
🏠 Homework
- Create a small “copyright footer” using
©, the year, and one emoji.