Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
©©When to use which? Prefer named entities for readability (e.g. ©), use numeric when no named version exists or when generating programmatically.
Hex form: © works the same as decimal.
See how character entities render in HTML with different use cases
Escaping HTML special characters to display them literally
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reserved Characters</title>
</head>
<body>
<h2>Displaying HTML Code</h2>
<p class="code-example">
HTML tag: <code><div class="box">Content</div></code>
</p>
<p>Use <code>&lt;</code> and <code>&gt;</code> to show literal angle brackets!</p>
<h2>Attribute Quotes</h2>
<p>Attribute with quotes: <code>data-text="Hello World"</code></p>
<p>Single quote: <code>It's working!</code></p>
<h2>Ampersand</h2>
<p>R&D (Research & Development)</p>
<p>AT&T Corporation</p>
<p class="note">✅ Always escape <code><</code>, <code>></code>, <code>&</code>, <code>"</code> in text content!</p>
</body>
</html>Loading preview...
Display mathematical operations and comparisons
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mathematical Symbols</title>
</head>
<body>
<h2>Basic Operations</h2>
<p>5 × 6 = 30 (multiplication)</p>
<p>10 ÷ 2 = 5 (division)</p>
<p>x ± 2 (plus or minus)</p>
<h2>Comparisons</h2>
<p>x ≥ 5 (greater than or equal)</p>
<p>y ≤ 10 (less than or equal)</p>
<p>a ≠ b (not equal)</p>
<h2>Other Symbols</h2>
<p>Temperature: 25°C or 77°F</p>
<p>Angle: 90° (right angle)</p>
<p class="note">➗ Use math entities for clear, semantic mathematical expressions</p>
</body>
</html>Loading preview...
Display currency symbols and legal marks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Currency & Trademark</title>
</head>
<body>
<h2>Currency Symbols</h2>
<p>Price: €99.99 (Euro)</p>
<p>Cost: ¥10,000 (Yen)</p>
<p>Total: £75.50 (Pound Sterling)</p>
<p>Sale: 50¢ off!</p>
<h2>Legal & Trademark</h2>
<p>Copyright © 2025 Company Name</p>
<p>MyBrand® (Registered Trademark)</p>
<p>NewProduct™ (Trademark)</p>
<p class="note">💰 Use proper currency symbols for international audiences</p>
</body>
</html>Loading preview...
Professional quotes, dashes, and punctuation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smart Typography</title>
</head>
<body>
<h2>Smart Quotes</h2>
<p>“Smart quotes” look better than "straight quotes"</p>
<p>‘Single quotes’ also available</p>
<h2>Dashes</h2>
<p>Em dash — connects independent clauses</p>
<p>En dash – for ranges (2010–2020)</p>
<p>Regular hyphen - for compound words</p>
<h2>Special Punctuation</h2>
<p>Ellipsis… for trailing thoughts</p>
<p>§ Section sign</p>
<p>¶ Paragraph mark</p>
<p class="note">✨ Smart typography makes content look more professional</p>
</body>
</html>Loading preview...
Navigation and logical operators with arrows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Directional Arrows</title>
</head>
<body>
<h2>Basic Directions</h2>
<p>← Go Back | Forward →</p>
<p>↑ Scroll Up | Down ↓</p>
<h2>Double Arrows (Implications)</h2>
<p>If A then B ⇒ (implies)</p>
<p>⇐ Reverse implication</p>
<p>A ⇔ B (if and only if)</p>
<h2>Navigation Examples</h2>
<p>← Previous | Next →</p>
<p>↑ Top | ↓ Bottom</p>
<p class="note">➡️ Perfect for navigation, logic, and flow diagrams</p>
</body>
</html>Loading preview...
Non-breaking spaces for units and proper wrapping
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Whitespace Control</title>
</head>
<body>
<h2>Normal Spaces (Collapse)</h2>
<p>Multiple spaces collapse into one</p>
<p>A B C D E (normal wrapping)</p>
<h2>Non-Breaking Spaces</h2>
<p>Weight: 10 kg (stays together)</p>
<p>Company: Apple Inc. (no break)</p>
<p>Date: January 15, 2025</p>
<p>Phone: 1 800 123 4567</p>
<h2>When to Use</h2>
<p>Units: 100 mph, 25 °C</p>
<p>Names: Dr. Smith, Mr. Johnson</p>
<p>Numbers: $ 1,234.56</p>
<p class="note">🔒 Non-breaking spaces prevent awkward line breaks in units and names</p>
</body>
</html>Loading preview...
| Description | Result | Name | Number |
|---|---|---|---|
| Less than | < | < | < |
| Greater than | > | > | > |
| Ampersand | & | & | & |
| Double quote | " | " | " |
| Single quote | ' | ' | ' |
Always escape < > & inside text nodes and attribute values where they could be misinterpreted.
| Description | Result | Name | Number |
|---|---|---|---|
| Non-breaking space | | |   |
| Inverted exclamation | ¡ | ¡ | ¡ |
| Inverted question mark | ¿ | ¿ | ¿ |
| Section sign | § | § | § |
| Paragraph sign | ¶ | ¶ | ¶ |
| Bullet | • | • | • |
| En dash | – | – | – |
| Em dash | — | — | — |
| Description | Result | Name | Number |
|---|---|---|---|
| Left single quote | ‘ | ‘ | ‘ |
| Right single quote | ’ | ’ | ’ |
| Left double quote | “ | “ | “ |
| Right double quote | ” | ” | ” |
| Ellipsis | … | … | … |
| Trademark | ™ | ™ | ™ |
| Description | Result | Name | Number |
|---|---|---|---|
| Non‑breaking space | | |   |
| Thin space | |   |   |
| Hair space | | N/A |   |
| Em space | |   |   |
| En space | |   |   |
Use sparingly: excessive non-breaking spaces harm accessibility and responsive wrapping.
| Description | Result | Name | Number |
|---|---|---|---|
| Cent | ¢ | ¢ | ¢ |
| Pound | £ | £ | £ |
| Yen | ¥ | ¥ | ¥ |
| Euro | € | € | € |
| Copyright | © | © | © |
| Registered TM | ® | ® | ® |
| Description | Result | Name | Number |
|---|---|---|---|
| Plus-minus | ± | ± | ± |
| Multiplication | × | × | × |
| Division | ÷ | ÷ | ÷ |
| Not equal | ≠ | ≠ | ≠ |
| Less than or equal | ≤ | ≤ | ≤ |
| Greater than or equal | ≥ | ≥ | ≥ |
| Degree | ° | ° | ° |
| Tilde | ~ | N/A | ~ |
| Description | Result | Name | Number |
|---|---|---|---|
| Left arrow | ← | ← | ← |
| Right arrow | → | → | → |
| Up arrow | ↑ | ↑ | ↑ |
| Down arrow | ↓ | ↓ | ↓ |
| Double right arrow | ⇒ | ⇒ | ⇒ |
| Double left arrow | ⇐ | ⇐ | ⇐ |
| Description | Result | Name | Number |
|---|---|---|---|
| é (e acute) | é | é | é |
| ñ (enye) | ñ | ñ | ñ |
| æ (ae ligature) | æ | æ | æ |
| ø (o slash) | ø | ø | ø |
| ß (eszett) | ß | ß | ß |
Prefer direct UTF‑8 characters in modern HTML; entities remain useful in legacy contexts and for clarity in tutorials.
©©Tip: Don’t double-encode. Writing &copy; shows “©” instead of ©. Unknown characters fall back to their numeric code points.
< > & " '      “ ” … —← → ↑ ↓× ÷ ≥ ≤ ≠€ ¥ £ ¢Experiment with reserved characters, math symbols, currency, typography, and more
Display accented letters and international text using entities
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>International Characters</title>
</head>
<body>
<h2>European Languages</h2>
<p>Álbum (Spanish) - Musical recording</p>
<p>Café (French) - Coffee house</p>
<p>Naïve (French) - Lacking experience</p>
<p>München (German) - City in Bavaria</p>
<h2>Scandinavian Letters</h2>
<p>Øresund (Danish/Swedish) - Strait/Bridge</p>
<p>Århus (Danish) - City in Denmark</p>
<h2>German Special</h2>
<p>Straße (German) - Street</p>
<h2>Ligatures</h2>
<p>Æ (Ash ligature)</p>
<p>œ (oe ligature)</p>
<p class="note">🌍 Modern best practice: Use UTF-8 directly instead of entities for international text</p>
</body>
</html>Loading preview...
Explore all HTML entity categories: reserved, symbols, typography, arrows, math, currency, and more in one beautiful interactive playground