HTML Emojis

HTML Tutorial

HTML Forms

HTML Graphics

HTML Media

HTML API

HTML Emojis

Emojis are characters derived from the UTF-8 character set: πŸ˜„ 😍 πŸ’—

What are Emojis?

Emojis appear like images or icons, but in reality, they are not.

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

UTF-8 includes almost all of the characters and symbols in the world.

The HTML charset Attribute

Knowing the character set used in the page by the web browser helps in displaying the HTML page correctly.

This is specified in the <meta> tag:

<meta charset=”UTF-8″>

If it is not specified, UTF-8 is the default character set in HTML.

UTF-8 Characters

Most of the UTF-8 characters cannot be typed on a keyboard, but can be displayed using numbers and are called entity numbers:

A is 65

B is 66

C is 67

				
					<!DOCTYPE html>
<html>
<head>

</head>
<body>
<p>I will display A B C</p> 
<p>I will display &#65; &#66; &#67;</p> 
<script>"use strict";function wprRemoveCPCSS(){var preload_stylesheets=document.querySelectorAll('link[data-rocket-async="style"][rel="preload"]');if(preload_stylesheets&&0<preload_stylesheets.length)for(var stylesheet_index=0;stylesheet_index<preload_stylesheets.length;stylesheet_index++){var media=preload_stylesheets[stylesheet_index].getAttribute("media")||"all";if(window.matchMedia(media).matches)return void setTimeout(wprRemoveCPCSS,200)}var elem=document.getElementById("rocket-critical-css");elem&&"remove"in elem&&elem.remove()}window.addEventListener?window.addEventListener("load",wprRemoveCPCSS):window.attachEvent&&window.attachEvent("onload",wprRemoveCPCSS);</script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script><noscript><link rel="stylesheet" href="https://mydevhelp.com/wp-content/cache/min/1/3b28910081ceb990ca26365d7c4f1629.css" media="all" data-minify="1" /><link rel='stylesheet' id='elementor-post-2269-css' href='https://mydevhelp.com/wp-content/uploads/elementor/css/post-2269.css?ver=1708316343' media='all' /><link rel='stylesheet' id='elementor-global-css' href='https://mydevhelp.com/wp-content/uploads/elementor/css/global.css?ver=1708316344' media='all' /><link rel='stylesheet' id='elementor-post-3541-css' href='https://mydevhelp.com/wp-content/uploads/elementor/css/post-3541.css?ver=1708907170' media='all' /></noscript></body>
</html>

				
			

Output:

I will display A B C

I will display A B C

Example Explained

The <meta charset=”UTF-8″> element specifies the character set.

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

To let the browser understand the character displayed, start the entity number with &# and end it with ; (semicolon).

Emoji Characters

Emojis are a characters Β thatΒ  are derived from the UTF-8 alphabet:

πŸ˜„ is 128516

😍 is 128525

πŸ’— is 128151

Example:

				
					<!DOCTYPE html>
<html>
<head>

</head>
<body>
<h1>My First Emoji</h1>
<p>&#128512;</p>
<noscript><link rel="stylesheet" href="https://mydevhelp.com/wp-content/cache/min/1/3b28910081ceb990ca26365d7c4f1629.css" media="all" data-minify="1" /><link rel='stylesheet' id='elementor-post-2269-css' href='https://mydevhelp.com/wp-content/uploads/elementor/css/post-2269.css?ver=1708316343' media='all' /><link rel='stylesheet' id='elementor-global-css' href='https://mydevhelp.com/wp-content/uploads/elementor/css/global.css?ver=1708316344' media='all' /><link rel='stylesheet' id='elementor-post-3541-css' href='https://mydevhelp.com/wp-content/uploads/elementor/css/post-3541.css?ver=1708907170' media='all' /></noscript></body>
</html>

				
			

Output:

My First Emoji

😀

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

Example:

				
					<!DOCTYPE html>
<html>
<head>

</head>
<body>
<h1>Sized Emojis</h1>
<p style="font-size:48px">
&#128512; &#128516; &#128525; &#128151;
</p>
<noscript><link rel="stylesheet" href="https://mydevhelp.com/wp-content/cache/min/1/3b28910081ceb990ca26365d7c4f1629.css" media="all" data-minify="1" /><link rel='stylesheet' id='elementor-post-2269-css' href='https://mydevhelp.com/wp-content/uploads/elementor/css/post-2269.css?ver=1708316343' media='all' /><link rel='stylesheet' id='elementor-global-css' href='https://mydevhelp.com/wp-content/uploads/elementor/css/global.css?ver=1708316344' media='all' /><link rel='stylesheet' id='elementor-post-3541-css' href='https://mydevhelp.com/wp-content/uploads/elementor/css/post-3541.css?ver=1708907170' media='all' /></noscript></body>
</html>


				
			

Output:

Sized Emojis

😀 😄 😍 💗