Previous
Written by: rJTutorial Team | Last Updated:

HTML Entities

HTML entities are specialized strings of text used to display characters that are either reserved by the HTML language or difficult to type on a standard keyboard. Because browsers interpret characters like < and > as the start and end of tags, using them directly in your content can lead to "tag collision," where the browser tries to parse your text as code, often breaking the page layout.

Developer Tip: Think of HTML entities as "escape sequences" for the web. They tell the browser, "Don't treat this as code; just draw the character on the screen."

Syntax

An HTML entity always follows a specific pattern: it starts with an ampersand (&) and ends with a semicolon (;). In between, you can use either a descriptive name or a unique decimal/hexadecimal number.

Syntax:

&entityName;

or

&#entityNumber;
Best Practice: Use Entity Names (like &copy;) whenever possible because they are much easier for humans to read and remember. Use Entity Numbers only when a named entity doesn't exist for the character you need.

Commonly Used HTML Entities

Understanding when to use entities is key to building robust, bug-free web pages. Here are the most common categories you will encounter in professional development.

1. Reserved Characters

Certain characters are "reserved" because they have functional roles in HTML. If you want to display the text <script> on a page without actually running a script, you must use entities.

Common Mistake: Forgetting to escape the ampersand (&) in URLs or text. If you write "Sales & Marketing," some older browsers or validators might get confused, thinking the & is the start of a broken entity. Always use &amp;.

Example 1: Display Reserved Characters

The following example shows how to safely display code snippets or reserved symbols within your UI.

<!DOCTYPE html>
<html>
<head>
  <title>HTML Entities Example</title>
</head>
<body>
  <p>Displaying code snippets safely:</p>
  <ul>
    <li>The &amp;amp; entity displays: &amp;</li>
    <li>To show a tag like &lt;div&gt;, use &amp;lt; and &amp;gt;.</li>
    <li>Quote marks in attributes: &amp;quot;Sample&amp;quot; becomes &quot;Sample&quot;</li>
  </ul>
</body>
</html>

2. Mathematical Symbols

Standard keyboards lack most mathematical operators. HTML entities provide a clean way to display equations without relying on external images or complex fonts.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Math Symbols with HTML Entities</title>
</head>
<body>
  <p>Equation Examples:</p>
  <ul>
    <li>Temperature variation: 10&deg;C &plusmn; 2&deg;</li>
    <li>Calculation: 5 &times; 10 &divide; 2 = 25</li>
    <li>Area of a circle: A = &pi;r&sup2;</li>
  </ul>
</body>
</html>

3. Currency Symbols

When building e-commerce sites or financial dashboards, you often need to support multiple global currencies. Using entities ensures these symbols render correctly regardless of the user's OS or installed fonts.

Watch Out: Ensure your HTML file is saved with UTF-8 encoding. While entities work everywhere, UTF-8 is the modern standard that allows most symbols to be typed directly, though entities remain safer for reserved characters.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Currency Example</title>
</head>
<body>
  <p>Product Pricing:</p>
  <ul>
    <li>US Price: &dollar;19.99</li>
    <li>EU Price: &euro;17.50</li>
    <li>UK Price: &pound;15.00</li>
    <li>Japan Price: &yen;2500</li>
  </ul>
</body>
</html>

4. Special Characters

This category includes typographical marks like the copyright symbol, arrows for navigation, and bullets for custom list styling.

Developer Tip: A very common "special" entity is &nbsp; (Non-Breaking Space). Use it when you want to prevent the browser from breaking a line between two words, such as "10&nbsp;km".

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Special Characters Example</title>
</head>
<body>
  <footer>
    <p>&copy; 2026 rJTutorial. All Rights Reserved &reg;</p>
    <p>View More &rarr;</p>
  </footer>
</body>
</html>

5. Emoji Entities

Emojis are actually part of the Unicode standard. You can display them using their decimal entity codes. This is useful for adding visual flair without loading heavy image files.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Emoji Example</title>
</head>
<body>
  <p>Using Decimal Codes for Emojis:</p>
  <p>Great job! &#128077;</p>
  <p>Success! &#127881;</p>
  <p>System Alert: &#9888;</p>
</body>
</html>

 

HTML Entities Reference Table

Quick Reference Table

Symbol Entity Name 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;
♥ &hearts; &#9829;
😂 N/A &#128514;
😊 N/A &#128522;

 

Summary

HTML entities are an essential tool for any web developer. They prevent the browser from misinterpreting reserved characters, solve the problem of missing keyboard symbols, and ensure that your content looks exactly as intended across all devices. By consistently using named entities for reserved characters and numerical codes for special symbols or emojis, you can write cleaner, more professional HTML code.

Previous