Skip to main content

How to Use Character Entities in HTML, CSS and JavaScript

By Craig Buckler

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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:


♠
♣
♥
♦
©
®

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!

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

New books out now!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.