Previous
Written by: rJTutorial Team | Last Updated:

HTML Symbols

In web development, you'll often need to display characters that aren't found on a standard keyboard—like the copyright symbol (©), the Euro sign (€), or mathematical operators. Furthermore, HTML uses certain characters (like < and >) to define tags. If you want to display these "reserved" characters as actual text on your page without confusing the browser, you need to use HTML symbols (also known as entities).

Developer Tip: While modern editors and UTF-8 encoding allow you to paste some symbols directly, using entities ensures your code remains readable and safe across different servers, databases, and older browsers.

Syntax

HTML symbols can be included in your code using two primary formats. Both start with an ampersand (&) and end with a semicolon (;).

  1. Entity Name: A descriptive name that is easy for humans to remember.
    Example: &copy;
  2. Entity Number: A numeric code (often related to Unicode) that the browser translates into a symbol.
    Example: &#169;

Both methods result in the same output: ©. While names are easier to read, numeric codes are sometimes more reliable for very obscure symbols that might not have a standardized name.

Common Mistake: Forgetting the semicolon (;) at the end of the entity. Without it, the browser may not recognize the code and will simply print the raw text (like &copy) to the screen.

Table: Common HTML Symbols

Symbol HTML Entity Name HTML Entity Number Description Example Code
© &copy; &#169; Copyright symbol <p>&copy; 2024 Company</p>
® &reg; &#174; Registered trademark <p>&reg; Brand Name</p>
™ &trade; &#8482; Trademark symbol <p>&trade; Company</p>
€ &euro; &#8364; Euro currency <p>Cost: &euro;50</p>
£ &pound; &#163; British pound symbol <p>Price: &pound;100</p>
¥ &yen; &#165; Japanese yen currency <p>Cost: &yen;1000</p>
± &plusmn; &#177; Plus-minus symbol <p>Tolerance: &plusmn;3%</p>
√ &radic; &#8730; Square root symbol <p>√16 = 4</p>
∞ &infin; &#8734; Infinity symbol <p>Value: ∞</p>
→ &rarr; &#8594; Right arrow <p>Next &rarr;</p>
← &larr; &#8592; Left arrow <p>&larr; Previous</p>
♥ &hearts; &#9829; Heart symbol <p>&hearts; Love</p>
• &bull; &#8226; Bullet point <p>&bull; List Item</p>
Best Practice: Always include <meta charset="UTF-8"> in your HTML <head>. This ensures that the browser correctly interprets the character set for the symbols and entities you use.

 

Example 1: Reserved and Special Characters

This example shows how to use symbols for standard website UI elements, such as footers, pricing tables, and navigation links.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Standard UI Symbols</title>
</head>
<body>
  <!-- Using &copy; for the footer -->
  <footer>
    <p>&copy; 2024 Acme Corp. All Rights Reserved.</p>
  </footer>

  <!-- Using &euro; for currency pricing -->
  <div class="price-tag">
    <p>Subscription: &euro;19.99/month</p>
  </div>

  <!-- Using &larr; and &rarr; for navigation pagination -->
  <nav>
    <a href="#">&larr; Older Posts</a> | <a href="#">Newer Posts &rarr;</a>
  </nav>
</body>
</html>
Watch Out: Be careful when copy-pasting text from word processors like Microsoft Word. They often use "smart quotes" or special dashes that aren't standard HTML. It's safer to replace those with their respective HTML entities.

Example 2: Mathematical Symbols

When writing technical or scientific documentation, HTML symbols provide a way to display formulas without needing complex image files or external libraries.

<!DOCTYPE html>
<html>
<head>
  <title>Scientific Documentation</title>
</head>
<body>
  <h2>Product Specifications</h2>
  <p>Manufacturing Tolerance: &plusmn;0.05mm</p>
  
  <h2>Math Reference</h2>
  <p>The calculation for the side length is: &radic;x<sup>2</sup></p>
  <p>The loop is designed to run until <em>n</em> reaches &infin;.</p>
</body>
</html>

 

Summary

HTML symbols are an essential tool for every developer's toolkit. They allow you to safely include reserved characters, currency signs, and mathematical notation without worrying about character encoding issues or keyboard limitations. By mastering both entity names and entity numbers, you can ensure your web content is accessible and renders perfectly across all devices and browsers. Use the reference table above as a shortcut for your next project!

Previous