HTML Adding Emojis
Emojis are characters from the UTF-8 character set: 😄 😍 💗
What are Emojis?
- Emojis look like images, or icons, but they are not.
- They are letters (characters) from the UTF-8 (Unicode) character set.
- UTF-8 covers almost all of the characters and symbols in the world.
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"/>
If not specified, UTF-8 is the default character set in HTML.
UTF-8 Characters
Many UTF-8 characters cannot be typed on a keyboard, but they can always be displayed using numbers (called entity numbers). Entity Numbers for some characters are given below.
A is 65
B is 66
C is 67
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<p>I will display A B C</p>
<p>I will display A B C</p>
</body>
</html>
I will display A B C
I will display A B C
Example Explained
The <meta charset="UTF-8"/> element defines the character set.
The characters A, B, and C, are displayed by the numbers 65, 66, and 67.
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>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>My First Emoji</h1>
<p>😀</p>
</body>
</html>
My First Emoji
😀
Since Emojis are characters, they can be copied, displayed, and sized just like any other character in HTML.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Sized Emojis</h1>
<p style="font-size:48px">
😀 😄 😍 💗
</p>
</body>
</html>
Sized Emojis
😀 😄 😍 💗
Some Emoji Symbols in UTF-8
| Emoji | Value |
|---|---|
| 🗻 |
🗻
|
| 🗼 |
🗼
|
| 🗽 |
🗽
|
| 🗾 |
🗾
|
| 🗿 |
🗿
|
| 😀 |
😀
|
| 😁 |
😁
|
| 😂 |
😂
|
| 😃 |
😃
|
| 😄 |
😄
|
| 😅 |
😅
|
Comments
Post a Comment