How embedded image works in HTML?

Question

I was reading a blog and I came across a simple snippet that rendered image without img tag or CSS. I would like to know how this works.

Snippet:

<span id="pie">🥧</span>

Copy and paste it in HTML file and the image gets rendered. How does this work? and what type of image can we embed in here?

Answer 1

The reason that you can do that is because the "image" that is used is actually an emoji. Emojis are considered to be characters, like letters in the alphabet, but it has colors. That's why it can be rendered without an <img> tag.

Answer 2

It's not an image, but an emoji inserted using the decimal (dec) or hexadecimal (hex) code (just like you render spaces using   ). Check examples here

Here's another example snippet

<span style='font-size:100px;'>&#129312;</span>

and it renders : 🤠