How to Use Special Characters in HTML

An Easy Guide to Using Special Characters in HTML

Math Symbols on Chalk Board
Alex Belomlinsky/iStock Vectors/Getty Images

The webpages that you visit online are built using HTML code that tells web browsers what the content of the page is and how to render it visually for viewers. The code contains instructional building blocks known as elements, which the webpage viewer never sees. The code also contains normal text characters such as those in headlines and paragraphs designed for the viewer to read.

The Role of Special Characters in HTML

When you use HTML and type the text designed to be viewed, you usually don't need any special codes—you use just your computer keyboard to add the appropriate letters or characters.

A problem arises when you want to type a character in the readable text that HTML uses as part of the code itself. These characters include the < and > characters that are used in the code to start and finish every HTML tag. You may also want to include characters in the text that don’t have a direct analog on the keyboard, such as © and Ñ. For characters that don't have a key on your keyboard, you enter a code.

Special characters are specific pieces of HTML code designed to display characters that are used in the HTML code or to include characters that are not found on the keyboard in the text the viewer sees. HTML renders these special characters with either numeric or character encoding so that they can be included in an HTML document, read by the browser, and displayed properly for your site's visitors to see.  

Special HTML Characters

Three characters are at the core of the syntax of the HTML code.

You should never use them in the readable portions of your webpage without encoding them first for proper display. They are the greater-than, less-than, and ampersand symbols. In other words, you should never use the less-than symbol < in your HTML code unless it is the start of an HTML tag. If you do, the character confuses the browsers, and your pages may not render as you expect.

The three characters you should never add unencoded are:

  • less-than sign <
  • greater-than sign >
  • ampersand &

When you type these characters directly into your HTML code—unless you are using them as elements in the code—type in the encoding for them, so they appear correctly in the readable text:

  • less-than sign – &lt;
  • greater-than sign – &gt;
  • ampersand  &amp;

Each special character begins with an ampersand—even the special character for ampersand begins with this character. Special characters end with a semicolon. Between these two characters, you add whatever is appropriate for the special character you want to add.  lt (for less than) creates the less-than symbol when it appears between the ampersand and semicolon in HTML. Similarly, gt creates the greater-than symbol and amp yields an ampersand when they are positioned between an ampersand and semicolon.

Special Characters You Can’t Type

Any character that can be rendered in the Latin-1 standard character set can be rendered in HTML. If it doesn't appear on your keyboard, you use the ampersand symbol with the unique code that has been assigned to the character followed by the semicolon.

For example, the "friendly code" for the copyright symbol is &copy; and ​​&trade; is the code for the trademark symbol.

This friendly code is easy to type and easy to remember, but there are a lot of characters that don't have a friendly code that is easy to remember.

Every character that can be typed on the screen has a corresponding decimal numeric code. You can use this numeric code to display any character. For example, the decimal numeric code for the copyright symbol—&#169;—demonstrates how numeric codes work. They still begin with an ampersand and end with a semicolon, but instead of friendly text, you use the number sign followed by a unique number code for that character.

The friendly codes are easy to remember, but the numeric codes are often more reliable.

Sites that are built with databases and XML might not have all the friendly codes defined, but they support the numeric codes.

The best way to find the numeric codes for characters is in character sets you can find online. When you find the symbol you need, just copy and paste the numeric code into your HTML.

Some character sets include:

  • Currency codes
  • Mathematical codes
  • Punctuation codes
  • Pronunciation codes
  • Diacritics codes

Non-English Language Characters

Special characters aren't limited to the English language. Special characters in non-English languages can be expressed in HTML including:

So What Are Hexadecimal Codes?

Hexadecimal code is an alternate format for displaying special characters in HTML code. You can use whichever method you want for your webpage. You look them up in character sets online and use them the same way you use friendly codes or numeric codes. 

Add the Unicode Declaration to Your Document Head

Add the following meta tag anywhere inside the <head> of your webpage to ensure that your special characters display correctly.

<meta http-equiv="content-type"
content="text/html;charset=utf-8" />

Tips

No matter which method you use, keep a few best practices in mind:

  • Always end your entity with a semicolon. Some HTML editors allow you to post HTML codes without the final semicolon, but your pages will be invalid, and many web browsers won't display the entities correctly without it.
  • Always begin with an ampersand. Many web editors let you get away with leaving out the "amp;" but when you display an ampersand alone in XHTML, it causes a validation error.
  • Test your pages in as many browsers as you can. If the character is crucial to understanding your document and you can't test it in the browser/OS combinations that your customers use, you should find another way to represent it. However, before you resort to images or something else, try one of the browser testing tools that can validate your code in multiple browsers.
Was this page helpful?