HTML Emojis
In this page:
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?
<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
<p>😀</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
<p>😀</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
<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
<span role="img" aria-label="Smiling face">😀</span>- Forgetting to include the required semicolon (;) at the end of your emoji codes.
- Omitting the required UTF-8 charset declaration in your head section, causing emojis to display as broken symbols.
- Failing to add descriptive accessibility labels, which makes your emojis unhelpful for screen-reader users.
- 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.
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: