Advanced HTML
HTML Entities & Symbols
In HTML, certain characters like
<,>,&, or"have special meanings and cannot be written directly inside the document - doing so can confuse the browser.
To display these characters properly, we use HTML entities.
An HTML entity is a code that begins with an ampersand (&) and ends with a semicolon (;).
They are used to represent characters that are either reserved in HTML or not available on a standard keyboard.
Syntax
html
&entity_name;
OR
&#entity_number;Example
html
<p>10 < 20 && 20 > 10</p>Commonly Used HTML Entities
| Character | Entity Name | Entity Number | Description |
|---|---|---|---|
| < | < | < | Less than sign |
| > | > | > | Greater than sign |
| & | & | & | Ampersand |
| " | " | " | Double quotation mark |
| ' | ' | ' | Apostrophe |
| © | © | © | Copyright symbol |
| ® | ® | ® | Registered trademark |
| ₹ | ₹ | ₹ | Indian Rupee symbol |
| € | € | € | Euro symbol |
| £ | £ | £ | Pound symbol |
| → | → | → | Right arrow |
| ← | ← | ← | Left arrow |
Example: Using Entities in HTML
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Entities Example</title>
</head>
<body>
<h2>HTML Entities Demo</h2>
<p>5 < 10 and 10 > 5</p>
<p>Copyright © 2025 HTML5 & CSS3</p>
<p>Price: 500 ₹</p>
<p>Symbols: ♥ ☆ ✓ ™</p>
</body>
</html>Special Symbol Entities
You can use entity names to display mathematical, currency, and shape symbols.
| Symbol | Entity | Description |
|---|---|---|
| ♥ | ♥ | Heart symbol |
| ☆ | ☆ | Star symbol |
| ✓ | ✓ | Check mark |
| × | × | Multiplication sign |
| ÷ | ÷ | Division sign |
| ∞ | ∞ | Infinity |
| ± | ± | Plus-minus sign |
| ≠ | ≠ | Not equal |
| ∑ | ∑ | Summation symbol |
Why Use HTML Entities?
- To display reserved characters like
<or>without breaking code. - To insert special characters (€, ©, ™, etc.) not on the keyboard.
- To ensure compatibility across different browsers and devices.
- To enhance readability and SEO safety (especially for symbols and quotes).
Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
Conclusion
HTML entities and symbols make your web pages look professional and readable while maintaining correct HTML syntax.
They’re especially useful in displaying currency, mathematics, special characters, and even icons in a clean and browser-safe way.