HTML Entities and Symbols
What are HTML Entities?
HTML entities are codes used to display special characters in HTML documents. Certain characters have special meaning in HTML (such as <, >, and &), and if you want to display these characters on a page, you need to use HTML entities.
Entity Syntax
HTML entities can be represented in two ways:
- Entity name:
&entity_name; - Entity number:
&#entity_number;
For example:
<or<represents<>or>represents>
Reserved Characters
Characters That Must Use Entities
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
| < | < | < | Less than |
| > | > | > | Greater than |
| & | & | & | Ampersand |
| " | " | " | Double quote |
| ' | ' | ' | Single quote (apostrophe) |
Example
html
<p>If a < b and b > c, then a < c</p>
<p>Company name: Smith & Johnson</p>
<p>He said: "Hello!"</p>Display result:
If a < b and b > c, then a < c
Company name: Smith & Johnson
He said: "Hello!"Space Characters
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
|   | Non-breaking space | |
  |   | En space | |
  |   | Em space | |
  |   | Thin space |
Common Symbols
Currency Symbols
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
| ¢ | ¢ | ¢ | Cent |
| £ | £ | £ | Pound |
| ¥ | ¥ | ¥ | Yen |
| € | € | € | Euro |
| $ | - | $ | Dollar |
Mathematical Symbols
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
| × | × | × | Multiplication |
| ÷ | ÷ | ÷ | Division |
| ± | ± | ± | Plus-minus |
| ≠ | ≠ | ≠ | Not equal |
| ≤ | ≤ | ≤ | Less than or equal |
| ≥ | ≥ | ≥ | Greater than or equal |
| ∞ | ∞ | ∞ | Infinity |
| ∑ | ∑ | ∑ | Summation |
| √ | √ | √ | Square root |
| ∫ | ∫ | ∫ | Integral |
Greek Letters
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
| α | α | α | Alpha |
| β | β | β | Beta |
| γ | γ | γ | Gamma |
| δ | δ | δ | Delta |
| π | π | π | Pi |
| Σ | Σ | Σ | Sigma (uppercase) |
| Ω | Ω | Ω | Omega (uppercase) |
Arrow Symbols
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
| ← | ← | ← | Left arrow |
| → | → | → | Right arrow |
| ↑ | ↑ | ↑ | Up arrow |
| ↓ | ↓ | ↓ | Down arrow |
| ↔ | ↔ | ↔ | Left-right arrow |
| ⇐ | ⇐ | ⇐ | Double left arrow |
| ⇒ | ⇒ | ⇒ | Double right arrow |
Punctuation Symbols
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
| © | © | © | Copyright |
| ® | ® | ® | Registered trademark |
| ™ | ™ | ™ | Trademark |
| § | § | § | Section |
| ¶ | ¶ | ¶ | Paragraph |
| • | • | • | Bullet |
| … | … | … | Ellipsis |
| ′ | ′ | ′ | Prime (minutes) |
| ″ | ″ | ″ | Double prime (seconds) |
Quotation Marks
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
| " | “ | “ | Left double quote |
| " | ” | ” | Right double quote |
| ' | ‘ | ‘ | Left single quote |
| ' | ’ | ’ | Right single quote |
| « | « | « | Left angle quote |
| » | » | » | Right angle quote |
Other Common Symbols
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
| ° | ° | ° | Degree |
| ¼ | ¼ | ¼ | One quarter |
| ½ | ½ | ½ | One half |
| ¾ | ¾ | ¾ | Three quarters |
| ‰ | ‰ | ‰ | Per mille |
| † | † | † | Dagger |
| ‡ | ‡ | ‡ | Double dagger |
| ♠ | ♠ | ♠ | Spades |
| ♣ | ♣ | ♣ | Clubs |
| ♥ | ♥ | ♥ | Hearts |
| ♦ | ♦ | ♦ | Diamonds |
Emoji Symbols
Modern browsers support Unicode emoji:
html
<p>😀 😀 Smile</p>
<p>❤️ ❤ Heart</p>
<p>⭐ ⭐ Star</p>
<p>🎉 🎉 Celebration</p>
<p>👍 👍 Thumbs up</p>Practical Examples
Copyright Notice
html
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>Mathematical Formulas
html
<p>Pythagorean theorem: a² + b² = c²</p>
<p>Circle area: A = πr²</p>
<p>Temperature: 25°C</p>Price Display
html
<p>Price: ¥99.99</p>
<p>Discount: ½ price</p>Quoted Text
html
<p>He said: “This is a great idea!”</p>
<p>Book title: «HTML Tutorial»</p>Complete Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Entities Example</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.example {
background-color: #f4f4f4;
padding: 15px;
margin: 10px 0;
border-left: 4px solid #333;
}
</style>
</head>
<body>
<h1>HTML Entities and Symbols Example</h1>
<div class="example">
<h2>Special Characters</h2>
<p>Less than: < Greater than: > Ampersand: &</p>
<p>Quotes: "Hello" Apostrophe: 'World'</p>
</div>
<div class="example">
<h2>Mathematical Symbols</h2>
<p>2 × 3 = 6</p>
<p>10 ÷ 2 = 5</p>
<p>x ≤ 10 and x ≥ 0</p>
<p>π ≈ 3.14159</p>
</div>
<div class="example">
<h2>Currency Symbols</h2>
<p>Dollar: $100</p>
<p>Euro: €50</p>
<p>Yen: ¥200</p>
<p>Pound: £75</p>
</div>
<div class="example">
<h2>Copyright Information</h2>
<p>© 2024 My Company®</p>
<p>Product Name™</p>
</div>
</body>
</html>Best Practices
- Use UTF-8 encoding: Use
<meta charset="UTF-8">in HTML documents to directly input most special characters - Escape reserved characters: Always use entities for
<,>,&,", etc. - Improve readability: For common symbols, entity names are more readable than numbers
- Consider compatibility: Some older browsers may not support all entities
- Use semantic symbols: Use appropriate symbols in the right places (e.g., copyright, trademark symbols)
Summary
HTML entities are an important tool for displaying special characters on webpages. Mastering common HTML entities can help you create more professional and accurate webpage content. Remember to escape reserved characters and use appropriate symbols and characters as needed.