Previous

HTML Entities

HTML entities are special codes used to represent characters that either have a reserved meaning in HTML or cannot be easily typed on a keyboard. They ensure that content is rendered correctly without causing issues in the HTML structure.

Syntax

HTML entities are written using an ampersand (&) followed by the entity name or number, and ending with a semicolon (;).

Syntax:

&entityName;

or

&#entityNumber;

Commonly Used HTML Entities

Below is a list of the most commonly used HTML entities:

1. Reserved Characters

Some characters have special meanings in HTML. They can be represented using entities to ensure they are displayed properly.

Example 1: Display Reserved Characters

Using reserved characters directly can break HTML. Instead, use entities to display them correctly.

<!DOCTYPE html>
<html>
<head>
  <title>HTML Entities Example</title>
</head>
<body>
  <p>Display Reserved Characters Properly:</p>
  <ul>
    <li>&amp; is used to represent an ampersand (&)</li>
    <li>&lt; is used to represent less-than symbol (&lt;)</li>
    <li>&gt; is used to represent greater-than symbol (&gt;)</li>
    <li>&quot; is used to represent double quotes (&quot;)</li>
    <li>&#39; is used to represent single quotes (&#39;)</li>
  </ul>
</body>
</html>

2. Mathematical Symbols

Mathematical symbols can also be represented using HTML entities.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Math Symbols with HTML Entities</title>
</head>
<body>
  <p>Mathematical Symbols:</p>
  <ul>
    <li>Plus-minus symbol: &plusmn;</li>
    <li>Multiplication symbol: &times;</li>
    <li>Division symbol: &divide;</li>
    <li>Pi symbol: &pi;</li>
  </ul>
</body>
</html>

3. Currency Symbols

You can also use HTML entities to represent currency symbols.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Currency Example</title>
</head>
<body>
  <p>Currency Symbols:</p>
  <ul>
    <li>US Dollar: &dollar;</li>
    <li>Euro: &euro;</li>
    <li>Pound: &pound;</li>
    <li>Yen: &yen;</li>
  </ul>
</body>
</html>

4. Special Characters

Other special characters like arrows, bullets, or special symbols can also be represented.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Special Characters Example</title>
</head>
<body>
  <p>Special Characters:</p>
  <ul>
    <li>Right Arrow: &rarr;</li>
    <li>Left Arrow: &larr;</li>
    <li>Bullet: &bull;</li>
    <li>Copyright symbol: &copy;</li>
    <li>Registered trademark symbol: &reg;</li>
  </ul>
</body>
</html>

5. Emoji Entities

You can represent emojis using HTML entities as well.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Emoji Example</title>
</head>
<body>
  <p>Emojis with HTML Entities:</p>
  <p>Smiling Face: &#128522;</p>
  <p>Face with Tears of Joy: &#128514;</p>
  <p>Love Heart: &#10084;</p>
</body>
</html>

 

HTML Entities

HTML Entities

Symbol HTML Entity Name HTML Entity Number
& amp 38
< lt 60
> gt 62
" quot 34
' apos 39
± plusmn 177
€ euro 8364
£ pound 163
¥ yen 165
→ rarr 8594
← larr 8592
• bull 8226
© copy 169
® reg 174
❤ love 10084
😂 tearsOfJoy 128514
😊 smilingFace 128522

 

Summary

HTML entities allow developers to safely include special characters in web content without breaking HTML structure. They are used for reserved symbols, mathematical symbols, currency symbols, special characters, and emojis. Always use these entities to maintain proper rendering and ensure cross-browser compatibility.

Previous