Emojis are graphical symbols or characters that are widely used in electronic communication to express various emotions or objects. In HTML, we can use emojis by using their Unicode values or by using their named character entity references. In this article, we will discuss how to use emojis in HTML using both methods with some examples.
Using Emojis by Unicode Values:
Unicode values are unique codes assigned to every character in Unicode standard. To use emojis by Unicode values, we need to know the Unicode value of the emoji we want to use. We can find the Unicode value of an emoji from various online resources or by using the Windows Character Map utility.
To use an emoji by Unicode value, we need to use the following syntax:
html
&#<unicode-value>;
Here, <unicode-value>
is the Unicode value of the emoji.
For example, to use the smiling face emoji (😊), which has a Unicode value of U+1F60A, we can use the following code:
html
😊
Similarly, we can use other emojis by their Unicode values.
Using Emojis by Named Character Entity References:
HTML has named character entity references for many emojis, which make it easier to use them in HTML. We can use these named character entity references to add emojis in our HTML code. To use an emoji by its named character entity reference, we need to use the following syntax:
html
&<entity-name>;
Here, <entity-name>
is the name of the character entity reference.
For example, to use the grinning face with big eyes emoji (😃), we can use the following code:
html
è
Similarly, we can use other emojis by their named character entity references.
Using Emojis in Table List:
We can also use emojis in table lists to make them more interactive and visually appealing. To use emojis in a table list, we can add them as a data value in a cell. Here’s an example:
html
<table> <tr> <th>Item</th> <th>Description</th> <th>Price</th> </tr> <tr> <td>🍔</td> <td>Hamburger</td> <td>$5.99</td> </tr> <tr> <td>🍟</td> <td>Fries</td> <td>$2.99</td> </tr> <tr> <td>🥤</td> <td>Soda</td> <td>$1.99</td> </tr> </table>
Here, we have used emojis to represent food items in a menu table.
here is a list of some commonly used HTML emojis with their names:
Emoji | Name | Code |
---|---|---|
😄 | Grinning Face with Smiling Eyes | 😄 |
😊 | Smiling Face with Smiling Eyes | 😊 |
😍 | Smiling Face with Heart-Eyes | 😍 |
🤔 | Thinking Face | 🤔 |
🤗 | Hugging Face | 🤗 |
🤩 | Star-Struck | 🤩 |
😂 | Face with Tears of Joy | 😂 |
😜 | Winking Face with Tongue | 😜 |
🙏 | Folded Hands | 🙏 |
💩 | Pile of Poo | 💩 |
❤️ | Red Heart | ❤ |
Note that the code provided is in hexadecimal format and can be used in HTML using the &#x
entity.
Conclusion:
Using emojis in HTML can make our web pages more interactive and visually appealing. We can use emojis by Unicode values or by named character entity references. Additionally, we can use emojis in table lists to make them more interesting. However, it is important to use emojis in moderation and make sure they are relevant to the content of the page.