HTML Emojis

❮ Prev Next ❯

Using emojis in HTML can add visual interest and expressiveness to your web pages. Emojis are small icons or pictograms that represent anidea,emotion,orobject.

They are supported by all modern browsers and can be easily added to HTML using either Unicode or named entities.

Using Unicode to Add Emojis:

Unicode is a character encoding standard that assigns a unique number to each character or symbol. This includes emojis, which are represented by Unicode code points.

To add an emoji using Unicode, you can simply include the code point in your HTML document using the following format: 

<p>The <strong>&#x{code_point};</strong></p>

For example, to display the smiling face with heart-eyes emoji, you can use the code point U+1F60D: 

<p>The <strong>&#x1F60D;</strong></p>

This will display the following emoji:😍

Using Named Entities to Add Emojis:

Named entities are a more human-readable way to represent Unicode characters, including emojis. To use named entities for emojis, you can use the following format: 

<p>The <strong>&#x{code_point};</strong></p>

For example, to display the &check up emoji, you can use the named entity &check;: 

<p>The <strong>&check;</strong></p>

This will display the following emoji:✓

Using Emojis in Text:

To add emojis within text, you can simply include the Unicode or named entity within the text itself. For example: 

<p>I love pizza <strong>&#x1F355;</strong></p>

This will display the following text: I love pizza 🍕

Using Emojis in Attributes:

Emojis can also be used within attributes, such as alt text for images or title text for links. For example: 

      <img src="piza.png"  alt="I love pizza 🍕"/>

This will display the image with the alt text "I love pizza 🍕".

Here are some examples of HTML Emojis:

  • 🗻 - &#128507;
  • 🗼 - &#128508;
  • 🗽 - &#128512;
  • 🗾 - &#128510;
  • 🗿 - &#128511;
  • 😀 - &#128512;
  • 😀 - &#128512;

try this examples to see how they are displaying in the browser

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta charset="UTF-8">
      <link rel="stylesheet"  href="style.css"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <p>&#128517;</p>
      <p>&#128516;</p>
      <p>&#128515;</p>
      <p>&#128514;</p>
      <p>&#128513;</p>
      <p>&#128512;</p>
    </body>
</html>

The HTML charset is very important when it comes to diplaying character in the website you will learn more about it in the next chapter.

❮ Prev Next ❯