Introduction
HTML entities are used to display reserved characters in HTML, ensuring they are rendered correctly by the browser. These entities are also used to display characters that do not appear on the keyboard. HTML entities start with an ampersand (&) and end with a semicolon (;).
Common HTML Entities
Reserved Characters
Reserved characters in HTML must be replaced with character entities to be displayed correctly.
&(Ampersand):&<(Less Than):<>(Greater Than):>"(Double Quote):"'(Single Quote or Apostrophe):'(or')
Example
<p>This & that</p>
<p>10 < 20</p>
<p>10 > 5</p>
<p>He said, "Hello!"</p>
<p>It's a nice day</p>
Non-Breaking Space
A non-breaking space ( ) prevents the browser from collapsing multiple spaces into a single space and prevents line breaks at its location.
Example
<p>First Second Third</p>
Mathematical Symbols
HTML entities can also represent mathematical symbols.
+(Plus):+-(Minus):−×(Multiplication):×÷(Division):÷
Example
<p>5 + 5 = 10</p>
<p>10 − 5 = 5</p>
<p>5 × 5 = 25</p>
<p>10 ÷ 2 = 5</p>
Greek Letters
HTML entities are used to display Greek letters.
Α(Alpha):ΑΒ(Beta):ΒΓ(Gamma):ΓΔ(Delta):Δ
Example
<p>Α Β Γ Δ</p>
Currency Symbols
HTML entities represent various currency symbols.
$(Dollar):$€(Euro):€£(Pound):£¥(Yen):¥
Example
<p>$100</p>
<p>€100</p>
<p>£100</p>
<p>¥100</p>
Other Special Characters
HTML entities represent various other special characters.
©(Copyright):©®(Registered):®™(Trademark):™°(Degree):°
Example
<p>© 2023 Company Name</p>
<p>Trademark: ™</p>
<p>Temperature: 25°C</p>
Complete List of Common HTML Entities
| Character | Entity Name | Entity Number |
|---|---|---|
| & | & |
& |
| < | < |
< |
| > | > |
> |
| " | " |
" |
| ' | ' |
' |
| © | © |
© |
| ® | ® |
® |
| ™ | ™ |
™ |
| ° | ° |
° |
| ± | ± |
± |
| × | × |
× |
| ÷ | ÷ |
÷ |
| ¶ | ¶ |
¶ |
| § | § |
§ |
| • | • |
• |
| – | – |
– |
| — | — |
— |
| ′ | ′ |
′ |
| ″ | ″ |
″ |
| ‰ | ‰ |
‰ |
| ‡ | ‡ |
‡ |
| ‹ | ‹ |
‹ |
| › | › |
› |
| ‡ | ‡ |
‡ |
Example: Using Multiple HTML Entities in a Document
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Entities Example</title>
</head>
<body>
<h1>HTML Entities Examples</h1>
<section>
<h2>Reserved Characters</h2>
<p>This & that</p>
<p>10 < 20</p>
<p>10 > 5</p>
<p>He said, "Hello!"</p>
<p>It's a nice day</p>
</section>
<section>
<h2>Non-Breaking Space</h2>
<p>First Second Third</p>
</section>
<section>
<h2>Mathematical Symbols</h2>
<p>5 + 5 = 10</p>
<p>10 − 5 = 5</p>
<p>5 × 5 = 25</p>
<p>10 ÷ 2 = 5</p>
</section>
<section>
<h2>Greek Letters</h2>
<p>Α Β Γ Δ</p>
</section>
<section>
<h2>Currency Symbols</h2>
<p>$100</p>
<p>€100</p>
<p>£100</p>
<p>¥100</p>
</section>
<section>
<h2>Other Special Characters</h2>
<p>© 2023 Company Name</p>
<p>Trademark: ™</p>
<p>Temperature: 25°C</p>
</section>
</body>
</html>
Conclusion
HTML entities are essential for displaying reserved and special characters correctly on web pages. By using entities like &, <, >, ", ', and many others, you can ensure that your web content is rendered accurately. Understanding and using HTML entities is crucial for creating well-structured and readable web pages.