Emoji Escape Sequences in HTML: Hex, Decimal, and CSS
HTML has four ways to represent an emoji. Each has a use case and a failure mode. Here is a map of when to use which. The first time I tried to put an emoji in an HTML document and have it survive every browser, I ended up with a broken rendering on older devices and a security warning from my linter about unescaped characters. HTML has four different ways to represent an emoji, and they are not interchangeable. Each has a use case and a failure mode. Here is a map of the escape sequences and when to use each. I was generating HTML emails, which is the most hostile rendering environment for emojis. Different email clients handle emojis differently, and the escape method you choose determines whether the emoji renders, renders as a broken box, or gets stripped entirely. I tested all four methods across 15 email clients and documented which worked where. The results changed how I write HTML. The Four Representation Styles HTML can represent an emoji as a literal character, as a decimal numeric entity, as a hexadecimal numeric entity, or as a CSS escape in a style attribute. All four render the same glyph in a conforming browser, but they behave differently in older browsers, in email clients, and when passed through sanitizers. Read the full article on Emoji Reference, and copy any emoji mentioned from the catalog of 1303+ entries on the home page.