HTML Entities
HTML entities offer methods to display reserved characters, ensuring correct rendering. Reserved characters, like ‘<‘, can create ambiguity if not displayed properly. HTML provides entity names and numbers for symbols not on basic keyboards (e.g., £, ¥, €, ©), resolving ambiguity and enabling accurate display.
Syntax
&entity_name; or & #entity_number;
Note: Entity names are case-sensitive.
Table of Content
- Entity Name and Entity Number
- Reserved Characters
- Other Characters
- Advantages and Disadvantages of HTML Entity
- Non-breaking Space
- Combining Diacritical Marks
Entity Name and Entity Number
Some useful Symbols with their Entity name and Entity numbers are listed below:
Notation | Symbols | Entity name | Entity Number |
---|---|---|---|
non-breaking space | | ||
< | less than | < | < |
® | registered trademark | ® | ® |
© | copyright | © | © |
€ | euro | € | € |
¥ | yen | ¥ | ¥ |
£ | pound | £ | £ |
¢ | cent | ¢ | ¢ |
“ | double quotation mark | " | “ |
& | ampersand | & | & |
> | greater than | > | > |
∂ | PARTIAL DIFFERENTIAL | ∂ | ∂ |
∃ | THERE EXISTS | ∃ | ∃ |
∅ | EMPTY SETS | ∅ | ∅ |
∇ | NABLA | ∇ | ∇ |
∈ | ELEMENT OF | ∈ | ∈ |
∉ | NOT AN ELEMENT OF | ∉ | ∉ |
+ | PLUS SIGN | + | + |
∏ | N-ARY PRODUCT | ∏ | ∏ |
∑ | N-ARY SUMMATION | ∑ | ∑ |
Α | Alpha | Α | Α |
Β | Beta | Β | Β |
Γ | Gamma | Γ | Γ |
Δ | delta | Δ | Δ |
Ε | Epsilon | Ε | Ε |
Ζ | Zeta | Ζ | Ζ |
♥ | BLACK HEART SUIT = valentine | ♥ | ♥ |
♣ | BLACK CLUB SUIT = shamrock | ♣ | ♣ |
♠ | BLACK SPADE SUIT | ♠ | ♠ |
↓ | DOWNWARDS ARROW | ↓ | ↓ |
→ | RIGHTWARDS ARROW | → | → |
↑ | UPWARDS ARROW | ↑ | ↑ |
← | LEFTWARDS ARROW | ← | ← |
™ | TRADEMARK | ™ | ™ |
♦ | BLACK DIAMOND SUIT | ♦ | ♦ |
° | degree | ° | ° |
∞ | infinity | ∞ | ∞ |
‰ | per-mille | ‰ | ‰ |
⋅ | dot operator | ⋅ | ⋅ |
± | plus-minus | ± | ± |
† | hermitian | ⊹ | ⊹ |
– | minus sign | − | − |
¬ | – | ¬ | ¬ |
% | percent sign | &percent; | % |
f | Function | ƒ | ƒ |
∥ | parallel | ∥ | ∥ |
Examples of HTML Entities
Example: In this example we displays various currency symbols using entity representations.
<!DOCTYPE html>
<html>
<body>
<div class="container">
<h3>
Different entity symbol
representation
</h3>
<ul style="list-style-type: none">
<li>
<h4>Indian currency: ₹</h4>
</li>
<li>
<h4>Euro: €</h4>
</li>
<li>
<h4>Pound: £</h4>
</li>
<li>
<h4>Yen: ¥</h4>
</li>
<li>
<h4>Dollar: $</h4>
</li>
</ul>
</div>
</body>
</html>
Output:
Reserved Characters
These characters are either reserved for HTML or those which are not present in the basic keyboard & can’t use them directly. Some of the reserved characters representations are given below:
Reserved Character | Entity Name |
---|---|
& | & |
< | < |
> | > |
“ | " |
Other Characters
Some characters that aren’t available directly on our keyboard, therefore such an entity can be used to represent it by using their entity number. These keywords are directly not available to type, we need to specify their entity number. Here #x before the numbers represents the hexadecimal representation.
Character | Entities |
---|---|
≥ | ≥ |
© | © |
€ | € |
∃ | ∃ |
Example: Illustration of the use of special characters that are directly not available to type from the keyboard.
<!DOCTYPE html>
<html>
<head>
<title>HTML Entities</title>
</head>
<body>
<p>Showing euro €</p>
<p>Showing cent ¢</p>
<p>Showing Copyright ©</p>
<p>Showing BLACK DIAMOND SUIT ♦</p>
<p>Showing TRADEMARK ™</p>
</body>
</html>
Output:
Advantages and Disadvantages of HTML Entity
Advantages
- Entity names can be easy to remember.
Disadvantages
- Browsers might not support all the entity names, instead, they can support the use of entity numbers.
Non-breaking Space
It is used to provide space that will not break into a new line. This HTML entity is represented by that will separate the 2 words & will stick together without breaking it into a new line. We can also use the non-breaking space for preventing the browsers from truncating spaces in HTML pages. The non-breaking hyphen (‑) is used to define a hyphen character (‑) that does not break into a new line.
Example
- 12:00 PM
- 256 km/h
If we use to write 10 spaces in our text, then the browser will remove 9 of them. In order to add real spaces in our text, we can use the character entity.
Combining Diacritical Marks
A diacritical mark is a “glyph” added to a letter. Diacritical marks like grave ( ` ̀) and acute ( ́ ) are called accents. It can appear both above and below a letter, inside a letter, and between two letters. Diacritical marks can be used in combination with alphanumeric characters to generate a character that is not present in the character set (encoding) used on the page. Here is the list of some diacritical marks.
Symbols | Character | Construct | Final Result |
---|---|---|---|
̀ | a | à | à |
́ | a | á | á |
̂ | a | â | â |
̃ | a | ã | ã |
̀ | O | Ò | Ò |
́ | O | Ó | Ó |
̂ | O | Ô | Ô |
̃ | O | Õ | Õ |