Posts How to use emojis on HTML
Post
Cancel

How to use emojis on HTML

There are mainly two ways to display emojis on your web page, but first:

HTML charset


To show the correct symbols, inform the web browser of the character set used on your page. Although the UFT-8 is the default character set, it’s better to declare it explicitly to ensure the correct information is displayed.

So, in the HTML <head> tags, put:

1
<meta charset="UTF-8>

First mode: using the emoji Unicode


First, go to this Unicode site page with the full emoji list. Find the emoji that you want to use. For example, I’ll choose the smiley upside-down face. On the second column, you have the code for it. In this case, the code is U+1F643

Image from unicode.org Image from unicode.org

Now replace the U+ for &#x, adding and ; at the end, and put it on your HTML code:

1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Lorem Ipsum</title>
  </head>
  <body> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>&#x1F643;</p>
  </body>
</html>

And the result will be: Page example

Second mode: copy and paste


Yes, exactly. You can copy and paste the emoji. Your code will be:

1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Lorem Ipsum</title>
  </head>
  <body> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>🙃</p>
  </body>
</html>

And you will have the same result. But, be aware that it can result in some incompatibilities, if you don’t declare your charset on the <head>

That’s it, I prefer the first mode, but both should work. Good luck with your coding!

This post is licensed under CC BY 4.0 by the author.