Using Emojis in HTML: Adding Emojis to Your Web Pages

Learn how to effectively use emojis in your HTML content. This tutorial explains how to include emojis directly, using Unicode code points and entity numbers, and demonstrates styling emojis with CSS for creating visually engaging and expressive web pages.

Using Emojis in HTML

What are Emojis?

Emojis are characters, not images. They belong to the UTF-8 (Unicode Transformation Format - 8-bit) character set, a standard that encompasses almost every character and symbol globally. Since emojis are characters, they can be used directly in HTML and styled like any other text.

Displaying Emojis in HTML

Because emojis are part of the UTF-8 character set, you can simply include them directly in your HTML. Many emojis can't be typed directly using a keyboard, so you might need to copy and paste them. You can also display emojis using their Unicode numerical code. Here's an example.

<p>My First Emoji: 😀</p>

The browser will render the emoji character.

Emoji Character Codes

You can also display emojis using their Unicode entity numbers (decimal or hexadecimal):

<p>Smiling Face: 😀</p> 
<p>Smiling Face (hex): 😀</p>

The &#number; (decimal) or &#xhex; (hexadecimal) notation specifies the character code. You need to start the code with `&#` and end it with a semicolon `;` for the browser to correctly interpret it as a character code.

Styling Emojis

Emojis can be styled just like regular text using CSS (Cascading Style Sheets). You can change their size, color, font, etc.

<p style="font-size: 3em; color: red;">😀</p>

Character Set and the `charset` Attribute

The character set (or charset) attribute specifies the character encoding used by the browser to correctly display the content. The default is UTF-8.

<meta charset="UTF-8">