HTML Emojis
Emojis are characters from the UTF-8 character set: 😄 😍 💗
HTML Emojis Examples
🚀🚁🚂🚃🚄
What are Emojis?
Emojis are neither images or icons, despite their appearance.
They belong to the UTF-8 (Unicode) character set and are letters.
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
Although many UTF-8 characters are untypable on a keyboard, they may always be seen by utilizing numbers, sometimes known as entity numbers:
- A is 55
- B is 56
- C is 57
Example
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>
<p>I will display A B C</p>
<p>I will display 7 8 9</p>
<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></body>
</html>
Example Explained
The <meta charset=”UTF-8″> element defines the character set.
The characters A, B, and C, are displayed by the numbers 55, 56, and 57.
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>
<meta charset="UTF-8">
<body>
<h1>My First Emoji</h1>
<p>😀</p>
</body>
</html>
Since Emojis are characters, they can be copied, displayed, and sized just like any other character in HTML.
Example
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>
<h1>Sized Emojis</h1>
<p style="font-size:48px">
😀 😄 😍 💗
</p>
</body>
</html>
HTML emojis
UTF-8
character set
web browser
charset attribute
entity numbers
emoji characters
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
HTML Emojis: Bringing Personality to Your Web Pages
When it comes to web design and content creation, the ability to incorporate emojis can add a touch of personality and visual interest to your pages. HTML provides a straightforward way to include emojis, allowing you to enhance the user experience and convey emotions effectively.
The key to using HTML emojis lies in understanding the UTF-8 character set. UTF-8 is a widely-adopted character encoding standard that supports a vast array of characters, including emojis. By ensuring your web pages are encoded in UTF-8, you can seamlessly integrate emoji characters into your HTML.
To display an emoji in your HTML content, you can use the corresponding entity number or the actual emoji character. For example, the “thumbs up” emoji can be represented as “👍” or simply “👍”. Web browsers will then render the emoji correctly, provided they support the character set.
Another important consideration is the charset attribute in your HTML document’s head section. By setting the charset to “UTF-8”, you can guarantee that your web browser will interpret the emoji characters correctly, ensuring a consistent and visually appealing experience for your users.
Incorporating HTML emojis can be a powerful way to add personality, convey emotions, and enhance the overall user engagement on your web pages. As you explore the world of web development, familiarize yourself with the available emoji characters and how to properly integrate them into your HTML code.
When it comes to web development, the ability to incorporate emojis into your HTML code can add a delightful and expressive flair to your content. Emojis, those small digital icons that convey emotions, ideas, and objects, have become an integral part of modern communication, and their integration into HTML can enhance the visual appeal and engagement of your web pages.
To use emojis in HTML, you’ll need to ensure that your web page’s character set is set to UTF-8, which is the standard character encoding that supports a wide range of characters, including emojis. You can do this by including the `charset=”UTF-8″` attribute in the “ tag within the “ section of your HTML document.
Once you’ve set the character set, you can simply type the emoji character directly into your HTML code, and it will be rendered by the web browser. Alternatively, you can use the corresponding entity number or name, such as `😀` or `😀`, which represent the “grinning face” emoji.
By incorporating emojis into your HTML, you can create more engaging and visually appealing content, whether it’s in headings, body text, or even as part of interactive elements like buttons or links. This can be particularly useful in areas such as social media, marketing, and user-generated content, where emojis can help convey emotions and add personality to your web pages.
Remember, while the use of emojis can be a powerful tool, it’s important to use them judiciously and in a way that aligns with your brand’s tone and style. Striking the right balance between functionality and aesthetics will ensure that your HTML emojis enhance the overall user experience of your website.
