INTRODUCTION
A smiley, sometimes referred to as a smiley face, is a basic ideogram that represents a smiling face. Since the 1950s it has become part of popular culture worldwide, used either as a standalone ideogram, or as a form of communication, such as emoticons.
Just like icons are a great way to bring essential content to the point, and help your website visitors to find and scan content.
Smiley also have evolved from an ideogram into a template for communication and used in written language. Not just written language it can now also be used in HyperText Markup Language displayable on your Web browser 🤝.
On the Internet, the smiley has become a visual means of conveyance that uses images. A practical example is smileys been used for many different purposes, including:
- Used in early 1980s Video Games;
- Yahoo! Messenger (from 1998) used smiley symbols in the user list next to each user, and also as an icon for the application.
So we can practically say that It is used for communication, imagery, branding and for topical purposes to display a range of emotions.
USING SMILEYS/EMOJI'S IN HTML
Like we have been introduced earlier, we would be getting through the process of writing emojis in Hyper Text MarkUp Language.
Definition of Terms
Emojis: Emojis are characters from the UTF-8 character set: 😌💕💸.
UTF-8 character:The Unicode Consortium developed the Unicode Standard. The Unicode Standard covers (almost) all the characters, punctuations, and symbols in the world. Unicode enables processing, storage, and transport of text independent of platform and language.
The default character encoding in HTML-5 is UTF-8.
Emoji Characters:
Since we already said, Emojis are characters from the UTF-8 character,
We need to know the characters of emojis to be able to display them properly when writing our mark up.
Here is a list of Emoji Characters
- 😄 is 128516
- 😍 is 128525
- 💗 is 128151
Getting Started
To display an HTML page correctly, a web browser must know the character set used in the page.
Meaning that if you would want to display an emoji on your web browser, you must include your <meta charset="UTF-8"> tag
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
/*SYNTAX*/
/* &#character set; */
<p> The Universe is watching 👀 👁 </p>
*Result*
The Universe is watching 👀 👁️
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p> Hello World 🌎 </p>
<p> Coding is fun 💻 💪 </p>
*Result*
Hello World 🌍
Coding is fun 👨💻 💪
</body>
</html>
EXTRAS ON EMOJI'S
Some other Emoji Symbols in UTF8
🗻 🗻
🗼 🗼
🗽 🗽
🗾 🗾
Below are some helpful links
Some Interesting News About Emoji's
- Nicolo Ribuado puts this up on Twitter
Did you know that in Node.js 16 you can use emojis as imports and exports names?
- Emojipedia put this up on Twitter
📲 iOS 14.5 is out now with these new emojis
CONCLUSION
- Using Emoji's can be very simple
- Your meta tag must include UTF8
- Know your syntax: &#character set;
- Know your character set
- Implement in your work
- Good luck ☺️☺️
Thanks for reading 👍👍