There may be times when you need to use a special character on your website, such as the ampersand symbol. However, you cannot simply type "&" in your HTML code, as this is a reserved HTML symbol.

Instead, you can use HTML entities or special codes to represent these characters. This allows you to add symbols to your webpage without interfering with the actual HTML code.

What Are Symbols in HTML?

When building an HTML website, you’ll use a range of symbols for punctuation. While you can add most characters directly to your page, some have special meaning or are difficult to type. For example, HTML uses symbols like angle brackets (< and >), ampersands (&), and quotation marks (" and ') to represent the structure of your content.

A web browser will typically interpret the angle bracket symbol as an opening or closing tag. If that’s not what you intend, it may cause errors in your webpage. Examples of symbols that require an entity code include:

  • Ampersand (&)
  • Less than (<)
  • Greater than (>)
  • Double quote (")
  • Single quote (')

Other symbols such as the copyright and trademark symbols do not require an entity code, but you can still use one if you prefer. They may be awkward to type or even unsupported in your text editor. Some examples include:

  • Copyright symbol (©)
  • Trademark symbol (™)
  • Registered trademark symbol (®)

What Are Named and Numeric Entities?

You can represent every symbol using a numeric entity code, and the most common with a named entity too. Here are some examples:

Symbol

Named Entity Code

Numeric Entity Code

Ampersand

&amp;

&#38;

Less than

&lt;

&#60;

Greater than

&gt;

&#62;

Double quote

&quot;

&#34;

Single quote

&apos;

&#39;

Copyright

&copy;

&#169;

Trademark symbol

&trade;

&#8482;

Registered trademark symbol

&reg;

&#174;

Using either the named or numeric code will display the corresponding symbol. For example, using either "&copy;" or "&#169;" will display the copyright symbol.

Adding Emojis to Your Webpage

You can also display emojis using an entity code. All emojis have a numeric entity code in HTML, but not all of them have a named entity code. Some examples include:

Symbol

Numeric Entity Code

Smiling Face (😃)

&#x1F603;

Laughing Face (😆)

&#x1F606;

Smiling Face with Halo (😇)

&#x1F607;

How to Insert Symbols Onto a Webpage Using Entity Codes

You can insert entity codes in your HTML page content. Viewing your webpage in a browser will convert the codes into their corresponding symbol.

  1. In a new HTML file, add the basic structure for an HTML webpage: 
            <!DOCTYPE html>
    <html>
      <head>
        <title>Symbol and Entity Example</title>
        <meta charset="UTF-8">
      </head>
      <body>
        
      </body>
    </html>
  2. Inside the body tag, add some HTML content. Include either the named or numeric entity code for the symbol you want to display: 
            <h1>HTML Symbols</h1>
    <p>Copyright symbol: &copy;</p>
    <p>Ampersand symbol: &amp;</p>
    <p>Trademark symbol: &trade;</p>
    <p>Smiling Face: &#x1F603;</p>
  3. Open your HTML file in a web browser to view the corresponding symbols:
    HTML in browser with entites

Using Special or Reserved HTML Symbols on Your Website

Now that you know how to add symbols to your HTML webpage, you can explore other interesting content that you can add to make your website more engaging.