HTML Emojis

HTML emojis are graphical representations of emotions, objects, symbols, etc., displayed using Unicode characters or emoji entities within HTML documents. They enrich communication, adding visual context to web pages, emails, and messaging platforms.

The <meta charset=”UTF-8″> element defines the character set. Unreachable UTF-8 characters displayed with entity numbers starting with &# and ending with ; .

Syntax:

<head>
<meta charset="UTF-8">
</head>

<body>
<p>&#number;</p> <!--number corresponding to UTF-8 character -->
</body>

Emojis are also characters from the UTF-8 alphabet and can be used in HTML by mentioning the corresponding emoji, decimal (dec) or hexadecimal (hex) reference in the above syntax.

HTML Emojis Examples

1. HTML Emojis using Unicode Decimal reference

HTML Emojis are represented using Unicode decimal references like &#128516; to display emojis, enabling the rendering of various symbols and icons in web content.

Example 1: Represent the following emoji in a webpage.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>HTML Emojis Example</title>
</head>

<body>
    <h1>HTML Emojis Example</h1>
    <p>
        &#128516; This is a smiling face with open mouth
        and smiling eyes emoji
    </p>
    <p>&#9996; This is a victory hand emoji</p>
    <p>&#8986; This is a watch emoji</p>
</body>

</html>

Output:

HTML Emoji

Explanation:

  • In the above example we define the document type with <!DOCTYPE html>. Set charset with <meta charset=”UTF-8″>.
  • Ensure proper display across devices with <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>.
  • ?: Smiling face with open mouth and smiling eyes.
  • ✌️: Victory hand emoji.
  • ⌚: Watch emoji.
  • Emojis represented using Unicode values in HTML.
CharDecimal referenceHexadecimal reference
?1285161F604
9996270C
?1283501F55E

2. HTML Emojis using Unicode hexadecimal reference

HTML Emojis are displayed using Unicode hexadecimal references like &#x1F604;, allowing the inclusion of diverse symbols and icons in web content.

Syntax:

<p>&#xhexaDecimal;</p>

Example 2: In this example, we will represent ?, ✌ and ? emoji in a webpage with hexadecimal(hex) reference.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Emojis Example</title>
</head>
<body>
    <h1>HTML Emojis Example using Unicode hexadecimal </h1>
    <p>
      &#x1F604; This is a smiling face with open mouth 
                and smiling eyes emoji
   </p>
    <p>&#x270C; This is a victory hand emoji</p>
    <p>&#x231A; This is a watch emoji</p>
</body>
</html>

Output:

HTML Emojis using Unicode hexadecimal

Explanation:

  • In the above example we defined with <!DOCTYPE html> and <html lang=”en”>.
  • Unicode hexadecimal references used for emojis, like &#x1F604;, &#x270C;, and &#x231A;.
  • Emojis represented by Unicode code points, enclosed in &#x and ;.
  • Each emoji has a unique hexadecimal Unicode value.
  • Emojis render according to their Unicode representations in modern web browsers.

Note: Since Emojis are characters, they can be copied, displayed and sized just like any other character in HTML. 

Example 3: In this example, we will change the font size of the following emojis.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>HTML Emojis Example</title>
    <style>
        .large {
            font-size: 2em;
            /* Increase font size */
        }
    </style>
</head>

<body>
    <h1>HTML Emojis Example</h1>
    <h3>Transport symbols</h3>
    <p>
        &#x1F682; Train &nbsp;&nbsp;
        <span class="large">&#x1F6E5;</span> Tram
    </p>
    <h3>Office emojis</h3>
    <p>
        &#x1F3E2; Office Building &nbsp;&nbsp;
        <span class="large">&#x1F4BC;</span> Laptop
    </p>
    <h3>People emojis</h3>
    <p>
        &#x1F468; Man &nbsp;&nbsp;
        <span class="large">&#x1F469;</span> Woman
    </p>
    <h3>People emojis</h3>
    <p>
        &#x1F436; Dog &nbsp;&nbsp;
        <span class="large">&#x1F981;</span> Lion
    </p>
</body>

</html>

Output: The output contains the different sizes of emojis.

Html Emoji Example

Explanation:

  • In the above example we defines various emojis using Unicode hexadecimal references.
  • Emojis are categorised into transport symbols, office emojis, people emojis, and animal emojis.
  • Each category includes two emojis, with every second emoji being larger in size.
  • CSS is used to increase the font size of the larger emojis.
  • The emojis are displayed alongside descriptive text to indicate their meaning or representation.

HTML Emojis Use Cases

To add emojis in an HTML document, use Unicode hexadecimal references or decimal references within the content, using “&#x” followed by the emoji code for hexadecimal, or “&#NNNN” for decimal.

Create an Emoji Generator by allowing users to select emojis from a list or input field, using HTML for structure, CSS for styling, and JavaScript for interactivity and functionality.

Build a Text to Emoji Translator where users input text and receive corresponding emojis, employing HTML for layout, CSS for styling, and JavaScript for text-to-emoji conversion and interaction.

To apply emoji hex code in list-style type for custom list points, use CSS `list-style-type` property with the Unicode hexadecimal value of the desired emoji, like `list-style-type: ‘\1F603’;`.



Contact Us