📖 What Are HTML Entities?
HTML entities are special codes that represent characters that have special meaning in HTML or characters not available on a standard keyboard.
Why We Need Entities
Some characters are reserved in HTML because they have special functions:
< starts a tag> ends a tag& starts an entity" delimits attribute values
If you type these directly in your content, the browser will try to interpret them as HTML code instead of displaying them.
The Problem
<p>To create a paragraph, use <p> tags.</p>
<p>To create a paragraph, use <p> tags.</p>
🔤 Essential HTML Entities
Reserved Characters (Must Escape)
| Character | Entity Name | Entity Number | Description |
|---|
| < | < | < | Less than / opening tag bracket |
| > | > | > | Greater than / closing tag bracket |
| & | & | & | Ampersand |
| " | " | " | Double quotation mark |
| ' | ' | ' | Single quotation mark / apostrophe |
Common Symbols
| Character | Entity Name | Entity Number | Description |
|---|
| © | © | © | Copyright |
| ® | ® | ® | Registered trademark |
| ™ | ™ | ™ | Trademark |
| € | € | € | Euro sign |
| £ | £ | £ | Pound sign |
| ¥ | ¥ | ¥ | Yen sign |
| § | § | § | Section sign |
| ° | ° | ° | Degree |
Mathematical Symbols
| Character | Entity Name | Entity Number | Description |
|---|
| × | × | × | Multiplication |
| ÷ | ÷ | ÷ | Division |
| ± | ± | ± | Plus-minus |
| ≠ | ≠ | ≠ | Not equal |
| ≤ | ≤ | ≤ | Less than or equal |
| ≥ | ≥ | ≥ | Greater than or equal |
| ½ | ½ | ½ | One half |
| ¼ | ¼ | ¼ | One quarter |
| ¾ | ¾ | ¾ | Three quarters |
Spacing and Dashes
| Character | Entity Name | Entity Number | Description |
|---|
| | |   | Non-breaking space |
| — | — | — | Em dash (long dash) |
| – | – | – | En dash (medium dash) |
💡 Non-Breaking Space: creates a space that prevents line breaks. Use it between "100 km" or "Mr. Smith" to keep them on the same line.
😀 Emojis and Unicode
Modern browsers support Unicode characters directly, including emojis. You can use them in three ways:
<p>Welcome to Ethiopia 🇪🇹</p>
<p>Welcome to Ethiopia 🇪🇬</p>
<p>Welcome to Ethiopia 🇪🇹</p>
⚠️ Important: Always declare <meta charset="UTF-8"> in your document head. Without it, special characters and emojis may display as garbled text (mojibake).
✏️ Exercise 9.1: Create a Copyright Footer
Create entities.html demonstrating your knowledge of entities:
- A paragraph showing how to write HTML code examples using
< and > (show at least 3 different tags as text)
- A math expression using
×, ÷, ½, and °
- A copyright footer with
© and the trademark symbol ™
- A sentence with a non-breaking space between a number and unit (e.g., "100 km")
- An em dash used correctly in a sentence
- Your country's flag emoji
📝 Module 9 Quiz
🎯 Module Summary
- ✅ Entities represent special characters that have meaning in HTML
- ✅ Always escape
<, >, &, and quotes when displaying them as text
- ✅
©, ®, ™ for intellectual property symbols
- ✅
prevents unwanted line breaks
- ✅ UTF-8 encoding is required for emojis and international characters
← Previous Module
Next: Module 10 →