Flash cards
Review the key moves
What is the main idea behind Using Emojis in HTML?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
<___ charset="UTF-8">Put the learning moves in the order that makes the concept easiest to apply.
What are Emojis?
Emojis look like images, but they are not.
Emojis are letters (characters) from the UTF-8 (Unicode) character set:
😄 😍 💗
UTF-8 covers almost all of the characters and symbols in the world.
| Emoji | Value |
|---|---|
| 🗻 | 🗻 |
| 🗼 | 🗼 |
| 🗽 | 🗽 |
| 🗾 | 🗾 |
| 🗿 | 🗿 |
| 😀 | 😀 |
| 😁 | 😁 |
| 😂 | 😂 |
| 😃 | 😃 |
| 😄 | 😄 |
| 😅 | 😅 |
Learn More
Full HTML Emoji Reference
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):
- A is 65
- B is 66
- C is 67
Example
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>
<p>I will display A B C</p>
<p>I will display A B C</p>
</body>
</html>Live preview
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>
<meta charset="UTF-8">
<body>
<h1>My First Emoji</h1>
<p>😀</p>
</body>
</html>Live preview
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>Live preview