HTML Entities: Displaying Special Characters and Symbols

Sometimes we like to display special characters on our web pages. For example, characters like copyright symbol (©), trademark symbol (™), or currency symbols ($, €). When you copy these symbols from the web or document and paste in your editor, they might not be rendered correctly because of encoding issues. And symbols like the lesser than sign (<), the greater than sign (>) and quotes (”) can be confused with HTML syntax.

To display such characters correctly, we use HTML entities. They are simply special codes in HTML reserved for displaying various such special characters.

Using HTML entities

To use HTML entities, you must replace the special character in your editor with its corresponding entity code. For example, the entity code for the less-than symbol (<) is <, and the entity code for the greater-than symbol (>) is >. By using these entity codes instead of the actual characters, you can include them in your HTML markup without causing any issues. Let's see a few more examples:

Try pasting this paragraph somewhere in your HTML file, and you’ll see that the entities &copy and ™ and rendered as the copyrights and trademark symbols on the browsers.

HTML entities syntax

The same copyrights symbol (©) and the trademarks symbol (™) can also be rendered using their digital representations © and ™ respectively.

This will give you the same result.

So as you can see, the syntax consists of an ampersand & followed by the entity name or number, and then terminated by a semicolon ;. You can use any of the two types of representations - entity names or entity numbers.

Entity names are human-readable names that correspond to specific characters. For example, to represent the copyright symbol (©), we use the entity name ©. Similarly, the less-than sign (<) can be represented using <. Using entity names makes the code more readable and intuitive.

Entity numbers, on the other hand, are numeric codes that correspond to specific characters in the character set. They provide a universal way to represent characters, irrespective of the character encoding or font used.

You can use the representation of your choice or based on the project requirements.

Below is a table of some commonly used special characters along with their entity names and numbers:

Here’s the complete HTML entities reference page.