HTML Entities
Display reserved characters and symbols safely in HTML.
When creating webpages, there are times when you need to display special characters that HTML normally interprets as part of its code. For example, if you want to display the < or > symbols on a webpage, the browser may think you are writing an HTML tag.
To solve this problem, HTML provides entities.
HTML entities allow you to display reserved characters, symbols, and special characters safely on a webpage.
What Are HTML Entities?
An HTML entity is a special code used to represent a character that might otherwise be interpreted incorrectly by the browser.
Entities usually start with an ampersand and end with a semicolon.
Example:
<This entity displays:
<
Without the entity, the browser could mistake the symbol for the start of an HTML tag.
Why Are Entities Important?
Entities help when you need to display:
- Reserved HTML characters
- Currency symbols
- Copyright symbols
- Mathematical symbols
- Non-breaking spaces
They ensure that content is displayed exactly as intended.
Reserved Character Entities
Some characters have special meaning in HTML and must be written as entities when displayed as text.
Less Than (<)
<Output:
<
Greater Than (>)
>Output:
>
Ampersand (&)
&Output:
&
Double Quote (")
"Output:
"
These entities prevent conflicts with HTML syntax.
Common Symbol Entities
HTML also provides entities for many commonly used symbols.
Copyright Symbol
©Output:
©
Registered Trademark
®Output:
®
Trademark Symbol
™Output:
™
These symbols are often used in company websites and product pages.
Currency Symbols
Entities can display currency symbols used around the world.
Indian Rupee
₹Output:
₹
Dollar
$Output:
$
Euro
€Output:
€
This is useful for e-commerce and financial websites.
Non-Breaking Space
Normally, browsers combine multiple spaces into a single space.
Example:
Hello WorldOutput:
Hello World
To create an extra space, use:
Example:
Hello WorldOutput:
Hello World
Best Practices
When using HTML entities:
- Use entities for reserved HTML characters.
- Use symbol entities instead of copying special characters from other sources.
- Use non-breaking spaces sparingly for spacing.
- Test symbols across different browsers and devices.
This helps ensure consistent display and better compatibility.
Key Takeaways
- Entities is an important topic to understand.
- Start with small examples and practice one step at a time.
- Use the idea in simple projects so it becomes easier to remember.
More HTML Entities
Use this table as a quick reference for other common symbols and their entity codes.
| Symbol | Name | Entity code |
|---|---|---|
| Space | Non-breaking space | |
| © | Copyright | © |
| ® | Registered trademark | ® |
| ™ | Trademark | ™ |
| € | Euro | € |
| £ | Pound | £ |
| ¥ | Yen | ¥ |
| ¢ | Cent | ¢ |
| § | Section | § |
| ¶ | Paragraph | ¶ |
| ° | Degree | ° |
| ± | Plus or minus | ± |
| × | Multiplication | × |
| ÷ | Division | ÷ |
| ← | Left arrow | ← |
| → | Right arrow | → |