HTML Emojis

Emojis (🙂 🤣 😎 ❤ 👍...) are small digital images or icons used to express emotions or ideas in electronic communication. They are often used in text messages, social media posts, and emails.

Emojis can be used to convey a wide range of emotions, from happiness and love to sadness and anger. They can also be used to represent objects, animals, and other common symbols.

Many smartphones and computers have built-in emoji keyboards or apps that can be used to easily insert emojis into messages.

How to use Emojis in HTML

In HTML, you can use emojis by including the Unicode character of the emoji in the code. For example, the Unicode for the 😀 smiling face emoji is U+1F600. To insert this emoji in an HTML document, you would use the following code:

<p>This is a smiling face emoji: &#x1F600;</p>

You can find the Unicode of an emoji by searching for it on a website such as https://www.unicode.org/emoji/charts/full-emoji-list.html or using an Emoji Picker or Icon library that provide the emojis in HTML format.

Alternatively, you can also use an emoji library like Twemoji which provides a set of open-source emojis that can be easily used on web pages. You can use it by adding the library to your HTML file and then referencing the emoji by its name, like this:

<img src="https://twemoji.maxcdn.com/2/72x72/1f600.png" alt="smiling face emoji">

Please note that the above method of using external library may increase the size of your webpage and affect the loading time.

Using <meta charset="UTF-8"> is mandatory

In order to use emojis in HTML, you should include the <meta charset="UTF-8"> tag in the head of your HTML document. This tells the browser that the document is using the UTF-8 character encoding, which supports a wide range of characters, including emojis.

Without this tag, the browser may not be able to properly display the emojis in the document.

The <meta> tag should be placed in the head of your HTML document, and it should be the first tag within the head, directly after the <head> tag. Here is an example of how to include the <meta charset="UTF-8"> tag in your HTML document:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>My HTML Document</title>
</head>

<body>
  <p>This is a thumbs up emoji: &#x1F44D;</p>
</body>

</html>

It is also a best practice to use the UTF-8 encoding as it is the most widely supported encoding and it is also recommended by the World Wide Web Consortium (W3C) as the default encoding for HTML5.

Some commonly used Emojis:

🙂 : U+1F642 — slightly smiling face

🤣 : U+1F923 — rolling on the floor laughing

😎 : U+1F60E — smiling face with sunglasses

😡 : U+1F621 — enraged face

😺 : U+1F63A — grinning cat

❤ : U+2764 — red heart

👍 : U+1F44D — thumbs up

💯 : U+1F4AF — hundred points

🚀 : U+1F680 — rocket

Listing all the emojis with their Unicode characters would be a very long list as there are thousands of emojis. However, you can find a list of emojis and their Unicode characters on the Unicode Consortium website at https://www.unicode.org/emoji/charts/full-emoji-list.html. This website provides a comprehensive list of all the officially recognized emojis and their corresponding Unicode characters.

You can also use online tools like https://emojipedia.org/ or https://www.webfx.com/tools/emoji-cheat-sheet/ to find the Unicode of an emoji by searching for it by name or by category.

Keep in mind that not all emojis are supported across different platforms, operating systems and devices. It's always recommended to test the emojis on the target devices or browsers to make sure they are displayed correctly.

HTML Basics