Emoji are the for the past thirty years and became extremely popular with the use of smartphones. Though initially young people use emoji in informal chat and instant messaging conversations, nowadays it has become common to use emoji in formal communication. If you are a web developer, blogger or site owner, it is also possible to insert emoji in HTML like any other text content. This will make your content appealing to the readers when reading on the browser.
Understanding Emoji
Before proceeding further, here are some of the points you need to understand about emoji.
- Unicode consortium, a non-profit organization defines the specification for each emoji character and maintain the technical documentation.
- In order to use emoji, you have to make sure the HTML document uses UTF-8 character set format.
- There are more than 1300 official emoji available as per Unicode and countless non-standard emoji are also available from various other developers. You can insert the formal Unicode emoji in HTML documents without any additional software tools.
- Emoji are text characters like alphanumerical characters. On iOS and Android mobile keyboards, you can switch the keyboard layout to insert emoji. However, desktop keyboards don’t have dedicated keys for each emoji symbol.
Without having keys on your keyboard, let us see how you can insert the emoji in HTML.
Unicode Codepoint
The purpose of Unicode consortium is to make emoji as a standard characters used uniform on all devices and languages. In order to accomplish this task, they will assign a unique codepoint for each emoji symbol with a default representation. Developers of applications and operating systems can make use of this codepoint to either use the default representation or customize the appearance. For example, U+1F609 is the codepoint for the popular Winking Face emoji. You can get the codepoints from official Unicode emoji page.
| Emoji | Codepoint | Hexadecimal | Decimal |
|---|---|---|---|
| Winking Face | U+1F609 | 1F609 | 128521 |
As you can see the codepoint is nothing but the hexadecimal code in the format “U+ hexadecimal”.
Insert Emoji in HTML
You can either use this hexadecimal code in HTML or convert this hexadecimal code in decimal format and use. These codes are generally called HTML escape entities or escape strings. Let us see how to use these codes properly in HTML webpage.
Defining UTF in HTML
As mentioned, the first and important step is to make sure your HTML document has the charset meta tag like below:
<meta charset="UTF-8">The complete HTML template should look something like below:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Webpage with Emoji</title>
</head>
<body>
...Your Content Goes Here...
</body>
</html>
Make sure to use the character encoding declaration immediately after the head tag. This will instruct the browsers to interpret hexadecimal and decimal escape strings as proper emoji symbols.
HTML Tags to Use with Emoji
As emoji are text characters, you can use any text related HTML tags to insert emoji. Paragraph and span tags are two easy options:
- <p>emoji</p>
- <span>emoji</span>
Remember, generally paragraph tag will create a new line while span will continue in the same line. In addition, you can also use emoji with other tags like <li> to create emoji list. After defining the character set and decided the tag you want to use, there are multiple options for you to insert emoji in your HTML page.
Using Hexadecimal Code in HTML
Let us take the same Winking Face emoji example. You can use the following hexadecimal code format in HTML to insert the emoji.
<p>This is a Winking Face <span>😉</span> emoji symbol.</p>You can either use capital or small letters to type the hexadecimal code. It will produce the result as below.
This is a Winking Face 😉 emoji symbol.
Emoji Decimal Code in HTML
Instead of hexadecimal code, you can use the decimal code as escape string with the below format.
<p>This is another Winking Face <span>😉</span> emoji symbol.</p>It will produce the same result as above. The only difference is that you can remove the ‘x’ in the syntax when using decimal code.
Directly Inserting Emoji in HTML
Though the above two methods are easy to use, it will not work for all the cases. The problem is that not all emoji have single codepoint. There are many emoji symbols contain combination of codepoints. For example, the codepoint for scientist emoji is U+1F9D1 U+200D U+1F52C which you can’t type with the above methods.
The easiest option here is to copy and paste the emoji you need between HTML tags.
<p>This is a scientist emoji <span>🧑🔬</span> symbol.</p>Now that you may ask a question, from where you can copy all these emoji symbols:
- There are lot of websites offer copy paste emoji symbol. We also have 1000+ copy paste emoji symbols with search option. You can search and find your favorite emoji symbol, simply click on it to copy to clipboard. After copying, you can paste the emoji in your HTML.
- If you don’t want to copy and paste, try alt code keyboard shortcuts for emoji symbol. For example, Alt + 128521 will produce Winking Face emoji. This will be useful when you frequently want to use few emoji. However, it will only work in Windows computers and you need a keyboard with separate number pad for typing the decimal code.
- Both Windows and macOS offers emoji panel that you can use for inserting emoji in HTML. In Windows, press “Win + .”keys and press “Command + Control + Space” in macOS. This will show a pop-up where you can search and insert the emoji.
HTML Document Editors
Most people use a text editor for preparing your HTML document. All text editor applications like Notepad, Notepad++, TextEdit, Brackets, etc. support inserting the emoji as explained above. Though editors like Notepad will show the emoji in plain black and white color, they will appear in solid color when displayed in browser.
Make sure to save the document in UTF-8 format.
Below is an example of the code in TextEdit editor and how it will show in Google Chrome browser.
If you use app for creating your HTML page, you can use the direct insertion method or use the keyboard shortcut. Remember, some content management system like WordPress uses PHP instead of HTML. You can learn more in a separate article about inserting emoji in WordPress.
Display of New Emojis
As mentioned, the appearance of emoji can be different depending on the character encoding used by that application. For example, Microsoft Edge, Firefox and Chrome may show the same emoji in different formats. Besides this factor, you will find some emoji symbols will show as a square box or display multiple symbols. This happens when the browser does not support the emoji character. Unicode releases new emoji every year and browsers need some time to adopt the new characters. Until that time, you will see a box instead of emoji.
For example, Heart on Fire emoji will look two symbols like this ❤️🔥. You can find all new emoji symbols are marked with ⊛ symbol in the official Unicode page. This is to indicate that the browsers may not support these symbols properly and you should avoid using them on your HTML page.
Conclusion
As you can see, there are many ways you can insert emoji in HTML webpages. The easiest one is to use emoji panels or copy paste from third-party websites. However, the emoji display may distract when developing a webpage on the text editors. In this case, you can use hexadecimal or decimal code format for the supported emoji symbols.
Leave a Reply
Your email is safe with us.