Emojis in HTML

Emojis in HTML with Examples

In this article, I am going to discuss Emojis in HTML with Examples. Please read our previous article where we discussed HTML vs XHTML with Examples.

Emojis in HTML

Emojis are letters (characters) from the UTF-8 (Unicode) character set. In HTML, the character set is defined via the meta charset=”UTF-8″> element. Because many UTF-8 characters are impossible to type on a keyboard, they can always be displayed using numbers called entity numbers.

To indicate to the browser that we are displaying a character, start the entity number with &# and end it with a “;”. If you don’t know what entities are, check out our Html Entities article.

The HTML charset Attribute

If we want to display emojis on an HTML page, we must specify the character set inside the HTML document’s head. This will help the browser in understanding that we are using a character set.

<meta charset=”UTF-8″>

UTF-8 Characters

We can display UTF-8 characters in a webpage using numbers known as entity numbers. In the below example we have printed x, y, z using entity numbers.

<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
flex-direction:column;
align-items:center;
height:100vh;
background-color:slateblue;
color:white;
font-family:arial;
font-weight:700;
}

</style>
<head>
<meta charset="UTF-8">
</head>
<body>

<p>Below entity number will display (x y z)</p> 
<p> &#88; &#89; &#90;</p> 

</body>
</html>

When you run the above code, you will get the following output in the browser.

Emojis in HTML with Examples

Emoji Characters in HTML

In the example below we have used entity numbers to insert emojis in a webpage.

<!DOCTYPE html>
<html>
<head>
<style>
body{
display:flex;
justify-content:center;
flex-direction:column;
align-items:center;
height:100vh;
background-color:dodgerblue;
font-family:arial;
padding:6%;
color:white;

}

p{
font-size:28px;}

</style>
<meta charset="UTF-8">
</head>
<body>

<h1>My Favourite Emojis</h1>

<p>&#128512;</p>
<p>&#128507;</p>
<p>&#128508;</p>
<p>&#128514;</p>
<p>&#128517;</p>

</body>
</html>

When you run the above code, you will get the following output in the browser.

Emoji Characters in HTML

Emoji Symbols in HTML
Emoji Value
🗻 &#128507;
🗼 &#128508;
🗽 &#128509;
🗾 &#128510;
🗿 &#128511;
😀 &#128512;
😁 &#128513;
😂 &#128514;
😃 &#128515;
😄 &#128516;
😅 &#128517;
🤕 &#x1F915;
😈 &#x1F608;
👻 &#x1F47B;
👽 &#x1F47D;
🙈 &#x1F648;
🙉 &#x1F649;
🙊 &#x1F64A;

In the next article, I am going to discuss Symbols in HTML with examples. Here, in this article, I try to explain Emojis in HTML with Examples and I hope you enjoy this Emojis in HTML with Examples article.

Leave a Reply

Your email address will not be published. Required fields are marked *