How to Use Special Characters in HTML

Move Your Site Beyond Plain Text

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

The webpages that you visit online are built using special code that tells the web browser what the content of the page is and how to render it visually for viewers. HTML is the language of code that is used for the structure / content of pages. This code contain building blocks known as elements which are used to create the webpages. Of course, webpages also contain normal characters of text, like the paragraphs of this article that you are now reading.

When you’re using HTML and typing out those text characters, you can type most of them without using any special codes. You simply use your computer's keyboard to add the appropriate letters or characters. This is easy enough. but how do you render the text elements that HTML uses as part of the language itself? This would include the < and > characters that are used in the code to start and finish every HTML tag.  Additionally, you will also need to to sometimes include characters that don’t have a direct analog on the keyboard, like © and Ñ. If you can't simply press the key for a character, how do you add it to your webpage? You use what are known as "special characters".

Special characters are specific pieces of HTML code meant for these aforementioned instances, either to display characters used in the HTML itself or to include characters not found on the keyboard. 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 and readers to see.

 Let's dig a little deeper into HTML special characters to see how they work on websites.

Special HTML Characters

There are three characters that you should never leave unencoded within your HTML documents because they are core to the syntax of the language itself. What do I mean by "unencoded"? In other words, you should never write the "less than symbol" of < in your HTML code unless it is the start of an HTML tag.

If you do, the character will confuse 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 &

Instead of typing these characters directly into your HTML code, you should type in the HTML encoding for them:

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

Notice the syntax here. Each special character begins with an ampersand (even the special character for ampersand begins with this character - a clear example of why the character itself must always be encoded!). The special characters end with a semi-colon. Between these two character you add whatever is appropriate for the special character you want to add.  The "lt" creates the "less than" symbol when it is between the ampersand and semi-colon in HTML.  

Special Characters You Can’t Type

Any character that can be rendered in the Latin-1 standard character set, can be rendered in HTML. Once again, you simply use the ampersand (&) with the unqiue code for the character followed by the semi-colon.

For example, the friendly code for the Copyright symbol is ©

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

What would you do if you needed to add code that did not have a friendly bit of text to remember and add?

Every character that can be typed on the screen has a corresponding numerical code. You can use this numerical code to display any character. For example, the numerical code for the copyright symbol is ©.  This is how numerical codes work. They still begin with an ampersand and end with a semi-colon, but instead of friendly text, you use the number sign followed by a unique number code for that character.

I prefer to use the friendly codes most of the time because they are easy to remember, but the truth is that number codes are often more reliable. Sites that are built with databases and XML might not have all the friendly codes defined, but the numerical codes are automatic.

The best way to find the numeric codes for characters is in character sets.

Some character sets include:

Non-English Language Characters

There are also a lot of characters in non-English languages that can be expressed in HTML.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 8/7/17