Using Emojis in HTML

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):


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 &#65; &#66; &#67;</p>


</body>

</html>

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


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    </head>
    <body>

    <h1>My First Emoji</h1>

    <p>&#128512;</p>

    </body>
    </html>

    Since Emojis are characters, they can be copied, displayed, and sized just like any other character in HTML.
  • <!DOCTYPE html>
  • <html>
  • <head>
  • <meta charset="UTF-8">
  • </head>
  • <body>

  • <h1>Sized Emojis</h1>

  • <p style="font-size:48px">
  • &#128512; &#128516; &#128525; &#128151;
  • </p>

  • </body>
  • </html>

HTML Basic Examples

In this chapter we will show some basic HTML examples. Don't worry if we use tags you have not learned about yet. HTML Documents All HTM...