## HTML Emojis Emojis are characters from the UTF-8 character set: 😄 😍 💗. An emoji (Japanese: 絵文字, pronounced *eh-moh-jee*) is a visual ideogram or pictogram used in web pages and digital chat applications. Originally developed for wireless communication in Japan, emojis are used to represent a wide range of emotions, objects, and concepts—such as a smiling face for happiness, or a cake for food. While emojis look like images or icons, they are not. They are actual text characters from the UTF-8 (Unicode) character set. --- ## The HTML Charset Attribute To display an HTML page correctly, a web browser must know which character set (encoding) the page is using. The character set is specified inside the `` element of an HTML document using the `` tag: ```html ``` > **Note:** UTF-8 is the default character set encoding in HTML5. It covers almost all characters, symbols, and emojis in the world. --- ## UTF-8 Characters and Entity Numbers Many UTF-8 characters cannot be typed directly using a standard keyboard. However, they can always be displayed in HTML using their unique decimal or hexadecimal numbers, known as **Entity Numbers**. For example, standard English letters have the following decimal entity numbers: * **A** is `A` * **B** is `B` * **C** is `C` ### Example: Displaying Standard Characters with Entity Numbers ```html

Displaying characters directly: A B C

Displaying characters using entity numbers: A B C

``` ### Explanation: * `` defines the character set. * The letters **A**, **B**, and **C** are rendered using their decimal values `65`, `66`, and `67`. * To display a character using its entity number, you must start with `&#` and end with a semicolon `;`. --- ## Using Emojis in HTML Because emojis are standard UTF-8 characters, you can use them in your HTML documents just like regular text. You can insert them directly as characters, or use their decimal/hexadecimal entity numbers. Since they are treated as text, you can also use CSS properties like `font-size` to scale them up or down without losing quality. ### Example: Displaying and Styling Emojis ```html

HTML Emojis

You can adjust the size of emojis using the CSS font-size property, just like regular text.

😀 😄 😍 💗

``` --- ## Common Emoji Reference Below is a list of some common emojis along with their corresponding HTML decimal entity numbers: | Emoji | HTML Decimal Entity | Description | | :---: | :---: | :--- | | 🗻 | `🗻` | Mount Fuji | | 🗼 | `🗼` | Tokyo Tower | | 🗽 | `🗽` | Statue of Liberty | | 🗾 | `🗾` | Map of Japan | | 🗿 | `🗿` | Moai (Easter Island Statue) | | 😀 | `😀` | Grinning Face | | 😁 | `😁` | Beaming Face with Smiling Eyes | | 😂 | `😂` | Face with Tears of Joy | | 😃 | `😃` | Grinning Face with Big Eyes | | 😄 | `😄` | Grinning Face with Smiling Eyes | | 😅 | `😅` | Grinning Face with Sweat | --- ## Best Practices and Considerations 1. **Always Declare UTF-8:** Ensure `` is declared at the very top of your `` section. Without it, browsers may fail to parse the emoji entities and display broken characters (like `` or `[]`) instead. 2. **Platform Variations:** Emojis are rendered by the operating system's system fonts. This means the exact same emoji code will look slightly different on iOS/macOS, Android, Windows, and Linux. 3. **Accessibility (a11y):** Screen readers read emojis aloud based on their Unicode descriptions. If you use emojis inline, ensure they do not disrupt the readability of your content for visually impaired users. If an emoji is purely decorative, you can wrap it in a `` with `aria-hidden="true"`.