Emojis

Emojis, part of the UTF-8 character set, are used in HTML to incorporate expressive symbols and icons. They can be inserted using Unicode codes or emoji entities, such as 😀 for πŸ˜€, adding visual elements to text.

🌍 Understanding Emojis πŸ˜ƒ

Emojis are not just icons or images; they are actually characters from the UTF-8 (Unicode) character set. They help convey emotions, symbols, and expressions in digital communication.

🌟 Categories of Emojis

  • 😊 Facial Expressions: Represent emotions (e.g., 😊, 😒, 🀩).
  • 🎈 Objects & Symbols: Depict various items and concepts (e.g., 🏠, πŸŽ‰, ❀️).
  • 🚩 Flags: Display national and regional flags (e.g., πŸ‡ΊπŸ‡Έ, πŸ‡―πŸ‡΅, πŸ‡¬πŸ‡§).
  • 🎭 Miscellaneous: Include stars, flames, and musical notes (e.g., ⭐, πŸ”₯, 🎢).

Emojis, such as πŸ˜„, 😍, and πŸ’—, are part of the standard UTF-8 character encoding.

πŸ“œ Unicode Reference Table for Emojis

EmojiUnicode Code
πŸ—»🗻
πŸ—Ό🗼
πŸ—½🗽
πŸ—Ύ🗾
πŸ—Ώ🗿
πŸ˜€😀
😁😁
πŸ˜‚😂
πŸ˜ƒ😃
πŸ˜„😄
πŸ˜…😅

πŸ”€ HTML Charset and Encoding

The charset attribute in HTML defines the character encoding, ensuring that special characters, including emojis, render correctly on web pages. This is set using the meta tag.

index.html
<meta charset="UTF-8">

🧐 How It Works

  • The <meta charset="UTF-8"> declaration tells the browser to use UTF-8 encoding.
  • Standard characters like A, B, and C are represented numerically (e.g., 65, 66, 67).
  • Special characters and symbols are inserted using their Unicode entity codes, starting with &# and ending with a semicolon (;).

πŸ”£ Using UTF-8 Characters in HTML

Some UTF-8 characters are not directly available on a keyboard but can be included using entity numbers.

For example:

  • The letter A has the code 65
  • The letter B has the code 66
  • The letter C has the code 67

Example Usage:

Displaying A B C

Displaying A B C

index.html
<p>Displaying A B C</p>  
<p>Displaying &#65; &#66; &#67;</p>

😍 Adding Emojis in HTML

Since emojis are part of UTF-8, they can be displayed using their respective Unicode values.

Examples:

  • πŸ˜„ β†’ &#128516;
  • 😍 β†’ &#128525;
  • πŸ’— β†’ &#128151;

Example:

🌈 My First Emoji

πŸ˜€

index.html
<h1>🌈 My First Emoji</h1>  
<p>&#128512;</p>

πŸ” Adjusting Emoji Size in HTML

Since emojis function as text characters, they can be resized using CSS styles just like regular text.

🎨 Large Emojis

πŸ˜€ πŸ˜„ 😍 πŸ’—

index.html
<h1>🎨 Large Emojis</h1>  
<p style="font-size:48px">  
&#128512; &#128516; &#128525; &#128151;  
</p>

Conclusion

Emojis are characters from the UTF-8 (Unicode) character set, used to express emotions, objects, symbols, and more in digital communication. They belong to categories such as facial expressions, objects, flags, and miscellaneous symbols. Emojis can be added to HTML using their respective Unicode codes, which are written as &# followed by the code and a semicolon.