How to Use Character Entities in HTML, CSS and JavaScript

You’ve almost certainly encountered entities in HTML pages. They’re commonly used for international characters, mathematical operators, shapes, arrows and other symbols. For example:


&spades;
&clubs;
&hearts;
&diams;
&copy;
&reg;

These map directly to UTF-8 characters. The symbol for PI (π) can either be written as π or its UTF-8 number π. You can look-up popular symbols on the HTML Character Entity Reference to discover their HTML entity code and UTF-8 index number. Strictly speaking, it’s not necessary to use these codes if you’re serving pages as UTF-8; the default character set for HTML and XML documents. However, there may be occasions when you’re not using UTF-8, adjacent characters are causing issues, or it’s difficult to enter a specific symbol on your keyboard. Similarly, you may be using ANSI or another encoding method for CSS and JavaScript files.

Entities in CSS

Adding content via pseudo elements is increasingly common — especially if you’re using webfont icons. To add any UTF-8 character, you need to find its number and convert that to hexadecimal. For Pi, it’s 03C0. This can be added within a CSS file using a preceding backslash, e.g.


#pi:before
{
	content: "\03C0";
}

Entities in JavaScript

Like CSS, JavaScript requires the UTF-8 number in hexadecimal. In this case, however, it must be escaped using a preceding “u”, e.g.


var pi = "u03C0";

If the character code is 255 or less, you can also use standard JavaScript 2-digit hexadecimal notation, e.g.


var copyright = "xA9";

That’s all there is to it. Simple solutions, but ones I always forget!

Frequently Asked Questions about Character Entities in HTML, CSS, and JavaScript

What are the different types of character entities in HTML, CSS, and JavaScript?

Character entities are a set of characters that allow you to display special characters on your webpage that are not readily available on your keyboard. In HTML, CSS, and JavaScript, there are three main types of character entities: Named entities, Numeric entities, and Hexadecimal entities. Named entities are represented by a name, for example, “&” for an ampersand. Numeric entities are represented by a number, for example, “&” for an ampersand. Hexadecimal entities are represented by hexadecimal numbers, for example, “&” for an ampersand.

How do I use character entities in HTML?

To use character entities in HTML, you need to start with an ampersand (&) followed by the entity name or number and then end with a semicolon (;). For example, to display a less than sign, you can use “<” or “<“. It’s important to note that HTML is case sensitive, so you must use the correct case when typing the entity name.

Why are character entities important in CSS and JavaScript?

Character entities are crucial in CSS and JavaScript because they allow you to include special characters in your code that would otherwise be interpreted as code. For example, if you want to include a quotation mark in a string in JavaScript, you can use the entity “”” to prevent the JavaScript interpreter from thinking that the string has ended.

Can I use Unicode instead of character entities?

Yes, you can use Unicode instead of character entities. Unicode is a universal character encoding standard that includes almost every character from all writing systems. However, it’s important to note that not all browsers and systems support all Unicode characters, so it’s often safer to use character entities, especially for special characters.

How can I find the correct entity for a specific character?

There are many online resources where you can find a list of character entities. For example, the W3Schools website has a comprehensive HTML entity list. You can also use online tools like the HTML Entity Lookup to find the correct entity for a specific character.

Are there any limitations or issues with using character entities?

One of the main limitations of using character entities is that they can make your code harder to read, especially if you’re using a lot of them. Also, as mentioned earlier, not all browsers and systems support all character entities, so you may encounter compatibility issues.

Can I use character entities in attributes in HTML?

Yes, you can use character entities in attributes in HTML. However, it’s important to note that the quotation marks around the attribute value must not be escaped, as this would cause the HTML parser to interpret it incorrectly.

How do I use character entities in CSS?

In CSS, you can use character entities by starting with a backslash () followed by the hexadecimal value of the character. For example, to include a quotation mark, you can use “\0022”.

What is the difference between HTML entities and HTML character references?

HTML entities and HTML character references are essentially the same thing. The term “entity” is often used to refer to the named version (e.g., “&”), while “character reference” is often used to refer to the numeric version (e.g., “&”).

Can I create my own character entities?

No, you cannot create your own character entities. The set of character entities is defined by the HTML specification, and browsers only recognize these predefined entities. However, you can use Unicode to represent a wide range of characters.