← Back to HTML Course | Chapter 4: Semantics & Entities | Lesson 5 of 10

HTML Emojis

Imagine sending a text message to a friend to share some exciting news, but you can only use words. It might feel a bit dry. Adding a quick smiley face or a thumbs-up emoji instantly makes your message feel warm, friendly, and expressive. HTML emojis are not image files. They are actual text characters mapped inside a giant international system called Unicode, meaning they will scale cleanly to any size without slowing down your webpage loading speed. You can easily display emojis on your page by writing their unique numerical codes directly in your HTML code.

In this page:

  1. What is an Emoji in HTML?
  2. Using Decimal Code Mappings
  3. Using Hexadecimal Code Mappings
  4. Ensuring Character Set Compatibility
  5. Accessible Emojis for Screen Readers
Syntax
markup 
<meta charset="UTF-8">
&#emoji_number;

What is an Emoji in HTML?

Emojis are actual text characters mapped inside the universal Unicode standard. Browsers read these codes and render them as colorful icons automatically.

Note: Because emojis behave like text, you can change their sizes using the CSS font-size property.
Warning: Different operating systems (like Apple iOS or Google Android) render emojis with slightly different designs.

Example: What is an Emoji in HTML?

markup 
<p style="font-size: 48px;">😀</p>

Using Decimal Code Mappings

Decimal codes are the most common way to write emojis in HTML. Every emoji code starts with an ampersand and hash symbol (&#) and ends with a semicolon (;).

Note: You can find comprehensive lists of emoji decimal codes online to add expressive icons to your pages.
Warning: Make sure you include the hash symbol (#) in your decimal code, or the browser will display it as plain text.

Example: Using Decimal Code Mappings

markup 
<p>&#128512;</p>

Using Hexadecimal Code Mappings

You can also write emojis using hexadecimal codes. Hexadecimal emoji codes start with an ampersand, hash, and x character (&#x) and end with a semicolon (;).

Note: Many development platforms list emojis in hexadecimal format, which you can use directly in your HTML code.
Warning: Do not forget the required x character in your hexadecimal emoji codes, as it tells the browser to parse the code as hexadecimal.

Example: Using Hexadecimal Code Mappings

markup 
<p>&#x1F600;</p>

Ensuring Character Set Compatibility

To make sure your emojis display correctly on your page, you must declare UTF-8 as your document's character set inside your head tag. If you skip this declaration, the browser may display your emojis as broken, garbled symbols.

Note: Always place the charset declaration at the very top of your head section.
Warning: Failing to specify UTF-8 can cause character rendering errors, especially on older systems.

Example: Ensuring Character Set Compatibility

markup 
<head>
  <meta charset="UTF-8">
</head>
<p>😀</p>

Accessible Emojis for Screen Readers

Screen readers can find emojis difficult to interpret. To make your emojis accessible to visually impaired users, wrap your emojis in a span tag with a role="img" attribute and an aria-label describing the icon.

Note: Always provide description labels for decorative emojis to keep your site accessible.
Warning: Failing to add description labels can cause screen readers to read the raw emoji code, which is unhelpful.

Example: Accessible Emojis for Screen Readers

markup 
<span role="img" aria-label="Smiling face">😀</span>
Live Example
Related Topics

HTML Symbols · HTML Charsets · HTML Entities · HTML URL Encode

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting to include the required semicolon (;) at the end of your emoji codes.
  2. Omitting the required UTF-8 charset declaration in your head section, causing emojis to display as broken symbols.
  3. Failing to add descriptive accessibility labels, which makes your emojis unhelpful for screen-reader users.
Chapter Summary
  • Emojis are actual text characters mapped inside the universal Unicode standard.
  • Display emojis on your webpage using simple decimal (&#) or hexadecimal (&#x) codes.
  • Declare UTF-8 as your document's character set and use descriptive accessibility labels to keep your emojis accessible to everyone.
Browser Support

Standard Unicode emojis are fully supported across all modern web browsers natively.

🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson HTML Symbols Next Lesson → HTML Charsets

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.