HTML Entities & Symbols Explained — Special Characters & Emojis
HTML entities represent characters that have special meaning in HTML or aren’t available on your keyboard — like < for <, © for ©, and emojis like 😊.
What You’ll Learn
By the end of this tutorial, you’ll know how to use HTML entities for reserved characters (like <, >, &), common symbols (copyright, currency, math operators), non-breaking spaces, and emojis.
Why Entities Matter
Think of HTML entities like secret codes. You can’t type < directly in HTML because the browser thinks it’s the start of a tag. So you use < (less-than) as a code that the browser converts to <.
Real-world use: Every tutorial that shows code examples uses entities (like this page). Every footer uses © for the copyright symbol. Currency symbols, math signs, and non-breaking spaces are everywhere.
Where This Fits in Your Learning Path
flowchart LR
A["Head & Meta"] --> B["**Entities & Symbols**"]
B --> C["Responsive HTML"]
C --> D["Graphics (Canvas & SVG)"]
D --> E["Media & APIs"]
E --> F["HTML Master"]
style B fill:#f97316,stroke:#c2410c,color:#fff
style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
style F fill:#22c55e,stroke:#16a34a,color:#fff
What Are HTML Entities?
An HTML entity always starts with & and ends with ;. In between is a name or number that represents a character:
- Named entity:
©→ © - Decimal entity:
©→ © - Hex entity:
©→ ©
Named entities are easiest to remember. Decimal works everywhere. Hex is for Unicode characters.
Reserved Characters (Must Be Escaped)
These characters have special meaning in HTML and must be written as entities:
| Character | Entity | Why it’s reserved |
|---|---|---|
< | < | Starts an HTML tag |
> | > | Ends an HTML tag |
& | & | Starts an entity |
" | " | Wraps attribute values |
' | ' | Wraps attribute values (single quotes) |
<p>Use &lt; for less-than and &gt; for greater-than.</p>
<!-- Output: Use < for less-than and > for greater-than. -->& for ampersands in URLs — otherwise the browser misinterprets them as entity start. Instead of <a href="page.php?id=1&name=test">, write <a href="page.php?id=1&name=test">.Common Symbols
| Character | Entity | Decimal | Use Case |
|---|---|---|---|
| © | © | © | Copyright notice |
| ® | ® | ® | Registered trademark |
| ™ | ™ | ™ | Trademark |
| € | € | € | Euro currency |
| £ | £ | £ | Pound sterling |
| ¥ | ¥ | ¥ | Japanese yen |
| ° | ° | ° | Degrees (temperature, angle) |
| × | × | × | Multiplication sign |
| ÷ | ÷ | ÷ | Division sign |
| ♥ | ♥ | ♥ | Heart symbol |
| • | • | • | Bullet point |
| … | … | … | Ellipsis |
<p>© 2026 DodaTech Tutorials. All rights reserved.</p>
<p>5 × 3 = 15 | 10 ÷ 2 = 5</p>
<p>Temperature: 98.6°F | Angle: 45°</p>Non-Breaking Space ( )
Normally, browsers collapse multiple spaces into one. (non-breaking space) creates a visible space that also prevents line breaks:
<p>Mr. Smith Jr. stays on one line — the browser won't split at the space.</p>
<p>This has extra spaces — visible and preserved.</p>When to use :
- Prevent “Mr.” and “Smith” from being split across lines
- Keep a number and its unit together:
50 km/h - Add multiple visible spaces (normally collapsed)
- Indent text without CSS
Emojis
Emojis are Unicode characters. You can use them directly in HTML (if your file is saved as UTF-8) or with entity references:
<p>Direct: 😊 🚀 🌍 ❤️</p>
<p>Hex: 😊 🚀 🌍 ❤️</p>
<p>Decimal: 😊 🚀 🌍 ❤️</p>Character Encoding
For entities and emojis to work, your page must declare UTF-8 encoding in the <head>:
<meta charset="UTF-8">Without this, special characters may display as garbled text — like © instead of © or ☺ instead of ☺.
Common Entity Mistakes
1. Forgetting the Semicolon
<!-- ❌ Wrong: no semicolon -->
©
<!-- ✅ Correct: semicolon required -->
©2. Using Text Instead of Entity for Reserved Characters
<!-- ❌ Wrong: browser thinks < is a tag -->
<p>Use < for less-than</p>
<!-- ✅ Correct: use entity -->
<p>Use < for less-than</p>3. Using Entities Inside <pre> or <code>
Even inside <pre> or <code>, reserved characters must be escaped. The browser first parses HTML, then applies <pre> formatting.
4. Forgetting & in URLs with Query Parameters
<!-- ❌ Wrong: & might be misinterpreted -->
<a href="/search?q=html&page=2">Next</a>
<!-- ✅ Correct: use & in URLs -->
<a href="/search?q=html&page=2">Next</a>5. Using Entities for Styling Instead of CSS
<!-- ❌ Wrong: using nbsp for indentation -->
<p> Indented text</p>
<!-- ✅ Correct: use CSS for styling -->
<p style="margin-left: 40px;">Indented text</p>Quick Reference
Reserved Characters (Always Escape)
< < less-than
> > greater-than
& & ampersand
" " double quote
' ' apostropheCommon Symbols
© © copyright
® ® registered trademark
™ ™ trademark
€ € euro
£ £ pound
¥ ¥ yen
° ° degree
× × multiplication
÷ ÷ division
• • bullet
… … ellipsis
[space] non-breaking spaceTry It Yourself
Experiment with entities in this sandbox:
Common Mistakes Beginners Make
1. Skipping the Fundamentals
Many beginners jump straight to advanced topics without mastering the basics. Take time to understand the core concepts before moving on.
2. Not Practicing Enough
Reading tutorials without writing code leads to shallow understanding. Code along with every example and experiment on your own.
3. Ignoring Error Messages
Error messages tell you exactly what went wrong. Read them carefully — they usually point to the line and type of issue.
4. Copy-Pasting Without Understanding
It’s tempting to copy code from tutorials, but typing it yourself and understanding each line builds real skill.
5. Giving Up Too Early
Every developer hits frustrating bugs. Take breaks, ask for help, and remember that struggling is part of learning.
Practice Questions
Q1: What entity represents the copyright symbol?© which renders as ©.
Q2: Why can’t you type Because the browser interprets < directly in HTML?< as the start of an HTML tag. Use < to display it literally.
Q3: What does It creates a non-breaking space — a visible space that also prevents the browser from breaking the line at that point. do?
Q4: What must you include for entities to work properly?<meta charset="UTF-8"> in the <head>. Without it, special characters may show as garbled text.
Q5: What entity should you use for an ampersand in a URL?& — so page.php?id=1&name=test instead of using & directly.
Challenge
Create a “Product Page” that includes:
- A copyright footer using
© - Pricing with
€or£ - A code example showing HTML tags (using
<and>) - A non-breaking space between a number and its unit
- At least two emojis
Frequently Asked Questions
What’s Next?
Now let’s make pages look great on all devices:
What’s Next
Congratulations on completing this Html Entities tutorial! Here’s where to go from here:
- Practice daily — Consistency is more important than long study sessions
- Build a project — Apply what you learned by building something real
- Explore related topics — Check out other tutorials in the same category
- Join the community — Discuss with other learners and share your progress
Remember: every expert was once a beginner. Keep coding!
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro