« Previous Next »

Using Emojis in HTML

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

Output 1:

UTF-8 Characters:

Output 2:

Emoji Characters

Output 3:

Practice Exercises

Task 1: How to correctly set UTF-8 encoding in HTML and render characters and emojis using decimal entity codes?

Goal: Build a modern status card using `` that displays standard text using ASCII decimal values (`A`, `B`, `C`), along with sized UTF-8 decimal emojis (`😀`, `😍`, `🌈`).
💡 Hint: Include `` inside ``, write decimal entities for letters, and adjust emoji size using CSS font-size or formatting tags.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>UTF-8 Characters & Emojis Example</title>
  </head>
  <body>

    <h2>User Status Card</h2>

    <!-- UTF-8 Decimal Characters -->
    <p>Grade Result: &#65; &#66; &#67;</p>

    <!-- UTF-8 Decimal Emojis -->
    <p>Current Mood: &#128512; &#128525; &#127752;</p>

    <!-- Sized Emojis -->
    <p style="font-size:36px;">Large Icons: &#128512; &#128525; &#127752;</p>

  </body>
</html>
Output :

User Status Card

Grade Result: A B C

Current Mood: 😀 😍 🌈

Large Icons: 😀 😍 🌈

Explanation: The <meta charset="UTF-8"> tag allows browser support for the UTF-8 character set. Decimal references like &#65; render standard ASCII characters (A, B, C), while higher decimal numbers like &#128512; render emojis whose visual size can be controlled using standard font scaling or CSS.
« Previous Next »