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.

Styling HTML Ordered Lists with CSS

Nicely styled OL on KeepAndCastle.Com
Nicely styled OL on KeepAndCastle.Com

As with the previous post, it’s the simple, small things that build your site’s “feel.” As with the HR in the previous post, ordered lists often end up being quite boring despite the range of numbering options. However, again, CSS3 offers us the ability to style these lists in a wide range of ways giving us full control over the lists’ feel.

Here I found Red Team Design‘s article “CSS3 Ordered List Styles” excellent and helpful. While I didn’t use any of the animations they built (they seemed a bit over the top to me, except for the small movement on the rectangle-shaped elements) I did find these examples a great starting point for creating my own styles.

The only issue I ran into that I have yet been able to solve is restarting the numbering on a multi-page list since their examples used CSS3’s counter-reset and counter-increment properties which I don’t fully understand yet.

Styling Horizontal Rules (HRs) in HTML

Beautiful CSS-Styled HTML HR with Code
Beautiful CSS-Styled HTML HR with Code

While the large things (colors, images, content, etc.) contribute to the “look” of your site, it’s the small things that make your site “feel” the way you want. When you’re looking at enhancing the “feel” of your site it’s often good to default styles applied by the users’ browser as much as possible. One place this can be done is with the HR element. Most websites use the horizontal rule in one way another as a way to easily divide content on the site. However, while it’s easy to change the color by setting the CSS “border-color” property, this leaves the same square, blocky look as the default HR. However, with widespread adoption of modern CSS properties, we can now use the “background-image” property to effectively modify the appearance of HRs, while allowing for excellent backwards-compatibility. To that end, I’ve discovered the “Simple Styles for <hr>’s” document at css-tricks.com to be very handy. These styles are beautiful, simple, and useful.