Horje

Tips (Total 4)


# Tips-1) What is Emojis in HTML

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.

Emojis are characters from the UTF-8 character set: 😂

List of All Emojis

Just go: https://gist.github.com/rxaviers/7360908

# Tips-2) What is 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:

Example of The HTML charset Attribute

<meta charset="UTF-8">

If not specified, UTF-8 is the default character set in HTML.

# Tips-3) How to set UTF-8 Characters

Many UTF-8 characters cannot be typed on a keyboard, but they can always be displayed using numbers (called entity numbers):

Example of UTF-8 Characters

index.html
Example: HTML
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>

<p>I will display A B C</p> 
<p>I will display &#65; &#66; &#67;</p> 

</body>
</html>

Output should be:

Example of UTF-8 Characters

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


# Tips-4) How to create HTML Emoji Characters

Emojis are also characters from the UTF-8 alphabet:

Example of HTML Emoji Characters

index.html
Example: HTML
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>

<h1>My First Emoji</h1>

<p>&#128512;</p>

</body>
</html>

Output should be:

Example of HTML Emoji Characters

Another Example of HTML Emoji Characters

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

<h1>Sized Emojis</h1>

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

</body>
</html>

Output should be:

Another Example of HTML Emoji Characters