Quick & Easy Guide to Using Emoji in HTML

I truly realized I was an adult this morning when one of my younger colleagues had to explain to me what Snapchat is and how to use it 👴. Previously, my knowledge of Snapchat was limited to their technical background πŸ’», business story πŸ“ˆ, and IPO 💰. The way that emoji have become a part of language in the US has only been expedited by the proliferation of visually-oriented chat options like Snapchat. So, the time has come as a now almost middle aged web developer to embrace the emoji. But, how to do it? It’s pretty easy when you understand a few key concepts.

HTML Entities

Anyone who’s done much with HTML will be familiar with HTML entities. &,  , < > © etc. are part of your vocabulary. Simply put, these allow you to render special characters that either have special meaning in HTML or aren’t found on most keyboards. The list of HTML entities is generally restricted to “named” entities but, you can actually use a similar syntax to express non-“named” entities using Unicode codes.

Unicode

Unicode is a standard (and the organization behind the standard) that sets out how software should express characters in order to allow different systems to communicate clearly. If you sent an email to a friend asking them to pay you the $10 they owed you but the system they use interprets the “$” character as a “Β₯” then you’d be pretty upset when they send you 9 cents. Unicode seeks to eliminate these types of issues by making sure characters are consistent across systems. This is important for emoji because Unicode has defined codes for over 2,500 different emoji. These might be rendered differently on different systems (see the Apple gun vs. the more standard one used by Google) but they should be the same element just with different styles.

Unicode + HTML Entities = 😁

All you need to know to get emoji in your HTML is how to write non-named HTML entities using Unicode codes. It’s pretty easy, really:
1. Find the Unicode code of the emoji you want to use. For what Unicode call the “grinning face” this is “U+1F600”
2. Drop the “U+” from the front, that’s just an indicator that it’s a Unicode code. For the grinning face you’d get “1F600”. This is a hexadecimal number.
3. Add that to the HTML entity form for non-named entities with hexadecimal values: &#x—–; and you get 😀 which renders as πŸ˜€

Now all you have to worry about is making sure you don’t accidentally use the wrong combination and end up with a sexual innuendo (unless that’s what you’re going for πŸ˜‰).

Note

  • Unicode’s Full Emoji List is a really useful guide for looking up the Unicode code of over 2,500 Emoji.
  • Not all systems, software, or devices support all of the Emoji but Unicode’s list actually shows you which systems do support each one. It’s likely not up to date but with emoji support increasing it’s more likely to not show one that is supported than to show one that’s not supported so it’s a solid guideline.
  • Since Emoji styles vary between systems, if you want full control of the style used on your site you’ll probably want to grab a CSS Emoji library that’s to your liking.

Leave a Reply