HTML Emojis || Using Emojis in HTML || What are Emojis? || The HTML charset Attribute || UTF-8 Characters || Emoji Characters|| Emoji Symbols in UTF-8

 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>
Check Code »

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>&#128512;</p>

</body>
</html>
Check Code »

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">
&#128512; &#128516; &#128525; &#128151;
</p>

</body>
</html>
Check Code »

Some Emoji Symbols in UTF-8

Emoji Value
🗻 &#128507;
🗼 &#128508;
🗽 &#128509;
🗾 &#128510;
🗿 &#128511;
😀 &#128512;
😁 &#128513;
😂 &#128514;
😃 &#128515;
😄 &#128516;
😅 &#128517;

For a full list, please go to our HTML Emoji Reference.

Nolej View

☆Hi ! My Name is M Hasaan Mumtaz . In our organisation we are taught you a good lecture for your career making skill We are taught from the "♤Article, ♤Video,♤ through some practical Examples". ♧We are 24/7 Connected with you. ● Our organisation help you for your skill improvement. ☆▪︎▪︎ Thanks for reading.

Post a Comment

Previous Post Next Post

Contact Form