HTML Emojis

What are Emojis?

Emojis look like images, but they are not. They are letters (characters) from the UTF-8 (Unicode) character set, which covers almost all characters and symbols in the world. Each emoji also has an entity number, so for example the mountain emoji is 🗻 and the grinning face is 😀.

HTML Emojis Examples

HTML supports emojis in many categories, including smileys, hands, people, office, places, transport, animals, food, plants, fruits, sports, earth and sky, weather, clothing, audio and video, celebration, entertainment, and symbols.

The HTML charset Attribute

To show a page correctly, the browser must know the character set used. You set it in the <meta> tag. If you do not specify one, UTF-8 is the default in HTML.

Charset meta tag

Setting the character set to UTF-8.

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

UTF-8 Characters

Many UTF-8 characters cannot be typed on a keyboard, but they can always be shown using entity numbers. For example, A is 65, B is 66, and C is 67. Start an entity number with &# and end it with a semicolon so the browser knows you are showing a character.

Example

The letters A, B, and C shown directly and by their entity numbers.

Prompt
A page with charset UTF-8 that displays the letters A B C two ways: typed directly, and using the entity numbers A B C.
Output: complete HTML page

Emoji Characters

Emojis are also characters from the UTF-8 set, so each has a number; for example, the grinning face 😄 is 128516. Because they are characters, emojis can be copied, displayed, and sized just like any other text.

A single emoji

One emoji shown by its entity number.

Prompt
A page with charset UTF-8 showing a heading "My First Emoji" and a single grinning-face emoji using the entity number 😀.
Output: complete HTML page

Sized emojis

Emojis enlarged with a CSS font size.

Prompt
A page with charset UTF-8 showing a heading "Sized Emojis" and a row of four emojis (entity numbers 128512, 128516, 128525, 128151) enlarged to 48px font size.
Output: complete HTML page