HTML Entities

HTML Character Entities Reference

HTML character entities are special codes used to display characters that have special meaning in HTML or characters that are not easily typed on a keyboard. They begin with an ampersand (&) and end with a semicolon (;).

Why Use HTML Entities?

• Reserved Characters: HTML uses certain characters like <, >, and & for markup. To display these literally, you must use entities.
• Special Characters: Display characters not available on standard keyboards like ©, ®, or mathematical symbols.
• Unicode Support: Ensure proper display of international characters across different systems and browsers.
• Accessibility: Screen readers can properly interpret entity names for better accessibility.

Entity Formats

Common Categories

Best Practices

• Use Named Entities: When available, named entities are more readable than numeric ones.
• Always Use Entities for Reserved Characters: Never use raw <, >, or & in HTML content.
• Consider UTF-8: With proper UTF-8 encoding, many special characters can be used directly.
• Validate Your Code: Ensure all entities are properly formed and recognized.
• Browser Compatibility: Test entities across different browsers, especially older ones.

Development Examples

<p>Copyright &copy; 2024 &mdash; All rights reserved</p>
<p>Price: &pound;19.99 (includes 20&percnt; VAT)</p>
<p>&ldquo;Hello, world!&rdquo; she said.</p>

// Using dangerouslySetInnerHTML
<div dangerouslySetInnerHTML={{__html: 'Price: &pound;19.99'}} />

// Using Unicode in JavaScript strings
const copyright = '\u00A9 2024';
const quote = '\u201CHello, world!\u201D';

Common Mistakes

• Forgetting the Semicolon: &copy without semicolon may not render correctly.
• Case Sensitivity: Named entities are case-sensitive: &Copy; ≠ ©
• Invalid Entities: Using non-existent entity names will display literally.
• Double Encoding: Encoding already-encoded entities can cause display issues.