Advanced HTML

HTML Entities & Symbols

In HTML, certain characters like <, >, &, or " have special meanings and cannot be written directly inside the document - doing so can confuse the browser.
To display these characters properly, we use HTML entities.

An HTML entity is a code that begins with an ampersand (&) and ends with a semicolon (;).
They are used to represent characters that are either reserved in HTML or not available on a standard keyboard.

Syntax

html

&entity_name;
OR
&#entity_number;

Example

html

<p>10 < 20 && 20 > 10</p>

Output:

10 < 20 && 20 > 10

Commonly Used HTML Entities

CharacterEntity NameEntity NumberDescription
<<&#60;Less than sign
>>&#62;Greater than sign
&&&#38;Ampersand
"""Double quotation mark
'''Apostrophe
©&copy;&#169;Copyright symbol
®&reg;&#174;Registered trademark
&#8377;&#8377;Indian Rupee symbol
&euro;&#8364;Euro symbol
£&pound;&#163;Pound symbol
&rarr;&#8594;Right arrow
&larr;&#8592;Left arrow

Example: Using Entities in HTML

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Entities Example</title>
</head>
<body>
  <h2>HTML Entities Demo</h2>
  <p>5 < 10 and 10 > 5</p>
  <p>Copyright &copy; 2025 HTML5 & CSS3</p>
  <p>Price: 500 ₹</p>
  <p>Symbols: &hearts; &star; &check; &trade;</p>
</body>
</html>

Special Symbol Entities

You can use entity names to display mathematical, currency, and shape symbols.

SymbolEntityDescription
&hearts;Heart symbol
&star;Star symbol
&check;Check mark
×&times;Multiplication sign
÷&divide;Division sign
&infin;Infinity
±&plusmn;Plus-minus sign
&ne;Not equal
&sum;Summation symbol

Why Use HTML Entities?

  • To display reserved characters like < or > without breaking code.
  • To insert special characters (€, ©, ™, etc.) not on the keyboard.
  • To ensure compatibility across different browsers and devices.
  • To enhance readability and SEO safety (especially for symbols and quotes).

Browser Support

Chrome
Edge
Firefox
Safari
Opera
IE9+
YesYesYesYesYesYes

Conclusion

HTML entities and symbols make your web pages look professional and readable while maintaining correct HTML syntax.
They’re especially useful in displaying currency, mathematics, special characters, and even icons in a clean and browser-safe way.