HTML Entities
Learn to display special characters, symbols, and reserved HTML characters using HTML entities for proper text rendering.
Understanding HTML Entities
HTML entities are special codes used to display characters that have specific meanings in HTML or characters that are not readily available on standard keyboards. They ensure proper rendering of text content without conflicts with HTML markup syntax.
Entities are essential for displaying characters like less-than (<) and greater-than (>) signs, copyright symbols, accented characters, mathematical symbols, and special typography characters in web pages.
🔤 Key Concept
HTML entities allow you to display special characters that would otherwise be interpreted as HTML code or are not available on standard keyboards.
Entity Syntax
HTML entities can be represented using named entities or numeric character references:
<!-- Named entities (human-readable) --> <p>This <tag> will be displayed as text.</p> <!-- Displays: This <tag> will be displayed as text. --> <!-- Numeric character references (decimal) --> <p>Copyright © 2025 My Company</p> <!-- Displays: Copyright © 2025 My Company --> <!-- Hexadecimal character references --> <p>Arrow: →</p> <!-- Displays: Arrow: → --> <!-- Mixed usage in content --> <p> The equation is: x < y && y > z – that’s “mathematics”! </p> <!-- Displays: The equation is: x < y && y > z – that's "mathematics"! -->
Entity Syntax Patterns:
- Named:
&name;(e.g., ©) - Decimal:
&#number;(e.g., ©) - Hexadecimal:
&#xnumber;(e.g., ©) - All entities start with
&and end with;
Reserved HTML Characters
<!-- Essential reserved characters --> <p> To display HTML tags as text: <div class="example">Content</div> </p> <!-- Displays: To display HTML tags as text: <div class="example">Content</div> --> <!-- Ampersand in URLs and text --> <p> Visit: example.com?name=John&age=25&city=NYC </p> <!-- Displays: Visit: example.com?name=John&age=25&city=NYC --> <!-- Quotes in attributes and text --> <p title="She said "Hello" to me"> He replied: "Nice to meet you!" </p> <!-- Non-breaking space --> <p> First Name: John Doe </p> <!-- Creates fixed spaces that won't break -->
Reserved Characters
<→ < (less than)>→ > (greater than)&→ & (ampersand)"→ " (double quote)'→ ' (apostrophe)
Special Spaces
→ Non-breaking space → En space (width of 'n') → Em space (width of 'm') → Thin space​→ Zero-width space
Common Symbols and Characters
<!-- Copyright and trademark symbols --> <p> © 2025 My Company™. All rights reserved®. </p> <!-- Displays: © 2025 My Company™. All rights reserved®. --> <!-- Currency symbols --> <p> Prices: $19.99, €15.50, £12.75, ¥2000 </p> <!-- Displays: Prices: $19.99, €15.50, £12.75, ¥2000 --> <!-- Mathematical symbols --> <p> Math: x ± y × z ÷ 2 = ∞ ∑ ∫ √x ≤ ≥ ≠ ≡ </p> <!-- Displays: Math: x ± y × z ÷ 2 = ∞ ∑ ∫ √x ≤ ≥ ≠ ≡ --> <!-- Arrows and geometric shapes --> <p> Directions: ↑ ↓ ← → ↔ ↵ Shapes: ■ □ ▲ ▼ ● ○ </p> <!-- Displays: Directions: ↑ ↓ ← → ↔ ↵ Shapes: ■ □ ▲ ▼ ● ○ --> <!-- Punctuation and typography --> <p> Typography: ‘single quotes’ and “double quotes” – en dash, — em dash, … ellipsis </p> <!-- Displays: Typography: 'single quotes' and "double quotes" – en dash, — em dash, … ellipsis -->
Accented Characters
<!-- Latin accented characters --> <p> French: Café, naïve, ça va? Spanish: ñaña, jalapeño, ¿Cómo estás? German: Mädchen, Straße, Gebäude </p> <!-- Displays: Café, naïve, ça va? ñañia, jalapeño, ¿Cómo estás? Mädchen, Straße, Gebäude --> <!-- Extended character sets --> <p> Nordic: Århus, København, Hälsingborg Eastern European: Warszawa, Kraków, Prage </p> <!-- Displays: Århus, København, Hälsingborg, Warszawa, Kraków, Prage --> <!-- Greek letters (common in science) --> <p> Greek: α β γ δ ε π σ ω Α Β Γ Δ Ε Π Σ Ω </p> <!-- Displays: Greek: α β γ δ ε π σ ω Α Β Γ Δ Ε Π Σ Ω -->
Practical Examples
<!-- Code documentation with entities --> <article class="code-tutorial"> <h2>Understanding the <div> Element</h2> <p> The <div> element is a generic container. To create one, write: <div class="example">content</div> </p> <pre> <!-- This is how you write HTML comments --> <div class="container"> <p>Your content goes here&hellip;</p> </div> </pre> </article> <!-- Business card with special characters --> <address class="business-card"> <h3>Dr. René Müller</h3> <p> Senior Software Engineer & Architect™<br> Techno Solutions AG®<br> Zürich, Switzerland </p> <p> ☎ +41 44 123 45 67<br> ✉ rene.mueller@techno.ch<br> 🌐 www.techno-solutions.ch </p> <p>© 2025 All rights reserved.</p> </address> <!-- Product pricing with currency --> <table class="price-table"> <thead> <tr> <th>Product</th> <th>Price (USD)</th> <th>Price (EUR)</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>Web Hosting</td> <td>$9.99/mo</td> <td>€8.50/mo</td> <td>✔ Available</td> </tr> <tr> <td>SSL Certificate</td> <td>$49.99/yr</td> <td>€42.00/yr</td> <td>❌ Out of stock</td> </tr> </tbody> </table>
Entity Reference Tables
Basic Symbols
©→ © (copyright)®→ ® (registered)™→ ™ (trademark)°→ ° (degree)§→ § (section)¶→ ¶ (paragraph)
Quotation Marks
‘→ ' (left single quote)’→ ' (right single quote)“→ " (left double quote)”→ " (right double quote)«→ « (left guillemet)»→ » (right guillemet)
Dashes
–→ – (en dash)—→ — (em dash)−→ − (minus sign)‐→ ‐ (hyphen)‑→ ‑ (non-breaking hyphen)
Special Characters
…→ … (ellipsis)·→ · (middle dot)•→ • (bullet)​→ Zero-width space⁠→ Word joiner
Best Practices
✅ Do
- Always escape reserved HTML characters
- Use named entities for common characters
- Use UTF-8 encoding when possible
- Use non-breaking spaces for fixed spacing
- Include proper character set declarations
- Test entity rendering across browsers
❌ Avoid
- Using entities for characters available in UTF-8
- Forgetting to escape ampersands in URLs
- Using incorrect entity syntax
- Over-using entities when direct Unicode works
- Mixing character encodings
- Using deprecated entity names