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:


♠
♣
♥
♦
©
®

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!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.red-team-design.com/ Catalin Rosu

    Nice article Craig!

    Here’s a practical example I made with entities in CSS : http://www.red-team-design.com/wp-content/uploads/2011/09/awesome-css3-buttons.html

    • Clinton

      Sorry, Catalin, but I went to your page and none of the entities are displaying. Tried with both Chrome and Firefox.

  • http://www.technbuzz.com sami1989

    thats how nicholas galaghar created a whole set of 96 icons; taking the advantage of growing trend of pseudo elements i-e before and after.

  • http://SelfReliantPress.com/WP mjy

    Useful article. Thanks!
    When using Unicode numbers in HTML entities, such as “ for the left double quote, it’s important to remember that the number must be given in decimal, not hex (the opposite of JavaScript escape sequences). That threw me for a while.

  • http://immysl.com Ahamed Imran

    This has always bugged me. I have seen some well-respected web designers using only the entity numbers. Is there any benefit or best practice that says entity numbers should be used rather than their equivalent entity names?

    • GaryJ

      If you want a polyglot document (one that can be parsed as text/html and application/xhtml+xml), then only 5 named references are supported – see http://www.w3.org/TR/html-polyglot/#named-entity-references

      The W3C also say that content SHOULD use the hexadecimal entities instead of decimal entities when both exist – see http://www.w3.org/TR/2005/REC-charmod-20050215/#C048

    • http://www.optimalworks.net/ Craig Buckler

      Browser compatibility is one issue. All browsers should understand the entity numbers but the names aren’t necessarily supported everywhere.

  • http://mathiasbynens.be/ Mathias Bynens

    Unfortunately, it’s not that simple.

    Supplementary characters in CSS can be escaped using their code points, as you mentioned. However, unless you use exactly 6 hexadecimal characters in the escape sequence, you’ll need to prepend a space character (unless the escape sequence is the end of the string).

    I’ve explained how to escape any character in CSS before, and made a tool as well: mothereff.in/css-escapes. Note that CSS escape sequences for supplementary characters don’t work in WebKit browsers, so it’s best to just leave them unescaped.

    To escape supplementary Unicode characters in JavaScript, you can’t just use the Unicode code point — you’ll have to escape the surrogate halves separately. I wrote about this here and here, and also made a tool that will escape any character for you: mothereff.in/js-escapes.

    P.S. “UTF-8 number”? I think you mean Unicode code point.

  • Neal

    Here’s a site that lays out all the special characters in an easy to find and read way. A good tool for designs. http://ikwebdesigner.com/special-characters/