Emojis in HTML

Emojis are characters from the UTF-8 character set: 😄 😍 💗

What are Emojis?

Emojis look like images, or icons, but they are not.

They are letters (characters) from the UTF-8 (Unicode) character set.

The HTML charset Attribute

To display an HTML page correctly, a web browser must know the character set used in the page.

This is specified in the <meta> tag:

<meta charset="UTF-8">

UTF-8 Characters

Many UTF-8 characters cannot be typed on a keyboard, but they can always be displayed using numbers (called entity numbers):

• A is 65
• B is 66
• C is 67

Example:

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="UTF-8">  
	</head>  
	<body>  
		<p>I will display A B C</p>  
		<p>I will display &#65; &#66; &#67;</p>  
	</body>  
</html>

The <meta charset="UTF-8"> element defines the character set.

The characters A, B, and C, are displayed by the numbers 65, 66, and 67.

To let the browser understand that you are displaying a character, you must start the entity number with &# and end it with ; (semicolon).

Emoji Characters

Emojis are also characters from the UTF-8 alphabet:

• 😄 is 128516
• 😍 is 128525
• 💗 is 128151

Example

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="UTF-8">  
	</head>  
	<body>  
		<h1>My First Emoji</h1>  
		<p>&#128512;</p>  
	</body>  
</html>

Output:

Since Emojis are characters, they can be copied, displayed, and sized just like any other character in HTML.

Example

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="UTF-8">  
	</head>  
	<body>    
		<h1>Sized Emojis</h1>  
		<p style="font-size:48px">  
		&#128512; &#128516; &#128525; &#128151;  
		</p>  
	</body>  
</html>

Output:

Some Emoji Symbols in UTF-8