Back to: HTML Tutorials
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> X Y Z</p> </body> </html>
When you run the above code, you will get the following output in the browser.
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>😀</p> <p>🗻</p> <p>🗼</p> <p>😂</p> <p>😅</p> </body> </html>
When you run the above code, you will get the following output in the browser.
Emoji Symbols in HTML
Emoji | Value |
🗻 | 🗻 |
🗼 | 🗼 |
🗽 | 🗽 |
🗾 | 🗾 |
🗿 | 🗿 |
😀 | 😀 |
😁 | 😁 |
😂 | 😂 |
😃 | 😃 |
😄 | 😄 |
😅 | 😅 |
🤕 | 🤕 |
😈 | 😈 |
👻 | 👻 |
👽 | 👽 |
🙈 | 🙈 |
🙉 | 🙉 |
🙊 | 🙊 |
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.