#20 HTML Entities, Symbols, Emojis

HTML Entities are some characters are reserved in HTML and they have special meaning when used in HTML document.

For example, you cannot use the greater than and less than signs or angle brackets within your HTML text because the browser will treat them differently and will try to draw a meaning related to HTML tag.

HTML processors must support following five special characters listed in the table that follows.

SymbolDescriptionEntity NameNumber Code
”quotation mark""
‘apostrophe ''
&ampersand&&
<less-than<<
>greater-than>>

Example

If you want to write <div id = "character"> as a code then you will have to write as follows

See the Pen entities by Arpit (@soniarpit) on CodePen.

There is also a long list of special characters in HTML 4.0. In order for these to appear in your document, you can use either the numerical codes or the entity names.

For example, to insert a copyright symbol you can use either of the following

&copy; 2021
or
&#169; 2021

ISO 8859-1 Symbol Entities

ResultDescriptionEntity NameNumber Code
 non-breaking space  
¡inverted exclamation mark¡¡
¤currency¤¤
¢cent¢¢
£pound££
¥yen¥¥
¦broken vertical bar¦¦
§section§§
¨spacing diaeresis¨¨
©copyright©©
ªfeminine ordinal indicatorªª
«angle quotation mark (left)««
¬negation¬¬
­soft hyphen­­
®registered trademark®®
™trademark™™
¯spacing macron¯¯
°degree°°
±plus-or-minus ±±
²superscript 2²²
³superscript 3³³
´spacing acute´´
µmicroµµ
paragraph
·middle dot··
¸spacing cedilla¸¸
¹superscript 1¹¹
ºmasculine ordinal indicatorºº
»angle quotation mark (right)»»
¼fraction 1/4¼¼
½fraction 1/2½½
¾fraction 3/4¾¾
¿inverted question mark¿¿
×multiplication××
÷division÷÷

ISO 8859-1 Character Entities

ResultDescriptionEntity NameNumber Code
Àcapital a, grave accentÀÀ
Ácapital a, acute accentÁÁ
Âcapital a, circumflex accentÂÂ
Ãcapital a, tildeÃÃ
Äcapital a, umlaut markÄÄ
Åcapital a, ringÅÅ
Æcapital aeÆÆ
Çcapital c, cedillaÇÇ
Ècapital e, grave accentÈÈ
Écapital e, acute accentÉÉ
Êcapital e, circumflex accentÊÊ
Ëcapital e, umlaut markËË
Ìcapital i, grave accentÌÌ
Ícapital i, acute accentÍÍ
Îcapital i, circumflex accentÎÎ
Ïcapital i, umlaut markÏÏ
Ðcapital eth, IcelandicÐÐ
Ñcapital n, tildeÑÑ
Òcapital o, grave accentÒÒ
Ócapital o, acute accentÓÓ
Ôcapital o, circumflex accentÔÔ
Õcapital o, tildeÕÕ
Öcapital o, umlaut markÖÖ
Øcapital o, slashØØ
Ùcapital u, grave accentÙÙ
Úcapital u, acute accentÚÚ
Ûcapital u, circumflex accentÛÛ
Ücapital u, umlaut markÜÜ
Ýcapital y, acute accentÝÝ
Þcapital THORN, IcelandicÞÞ
ßsmall sharp s, Germanßß
àsmall a, grave accentàà
ásmall a, acute accentáá
âsmall a, circumflex accentââ
ãsmall a, tildeãã
äsmall a, umlaut markää
åsmall a, ringåå
æsmall aeææ
çsmall c, cedillaçç
èsmall e, grave accentèè
ésmall e, acute accentéé
êsmall e, circumflex accentêê
ësmall e, umlaut markëë
ìsmall i, grave accentìì
ísmall i, acute accentíí
îsmall i, circumflex accentîî
ïsmall i, umlaut markïï
ðsmall eth, Icelandicðð
ñsmall n, tildeññ
òsmall o, grave accentòò
ósmall o, acute accentóó
ôsmall o, circumflex accentôô
õsmall o, tildeõõ
ösmall o, umlaut marköö
øsmall o, slashøø
ùsmall u, grave accentùù
úsmall u, acute accentúú
ûsmall u, circumflex accentûû
üsmall u, umlaut marküü
ýsmall y, acute accentýý
þsmall thorn, Icelandicþþ
ÿsmall y, umlaut markÿÿ

Other Entities Supported by HTML Browsers

ResultDescriptionEntity NameNumber Code
Œcapital ligature OEŒŒ
œsmall ligature oeœœ
Šcapital S with caronŠŠ
šsmall S with caronšš
Ÿcapital Y with diaeresŸŸ
ˆmodifier letter circumflex accentˆˆ
˜small tilde˜˜
 en space  
 em space  
 thin space  
‌zero width non-joiner‌‌
‍zero width joiner‍‍
‎left-to-right mark‎‎
‏right-to-left mark‏‏
–en dash––
—em dash——
‘left single quotation mark‘‘
’right single quotation mark’’
‚single low-9 quotation mark‚‚
“left double quotation mark““
”right double quotation mark””
„double low-9 quotation mark„„
†dagger††
‡double dagger‡‡
…horizontal ellipsis……
‰per mille ‰‰
‹single left-pointing angle quotation‹‹
›single right-pointing angle quotation››
€euro€€

HTML Emojis

Emojis are characters from the UTF-8 character set: 😄 😍 💗

Emojis look like images, or icons, but they are not.

They are letters (characters) from the UTF-8 (Unicode) character set.

UTF-8 covers almost all of the characters and symbols in the world.

To display an HTML page correctly, a web browser must know the character set used in the page.

This is specified in the <meta> tag:

<meta charset="UTF-8">

If not specified, UTF-8 is the default character set in HTML.

UTF-8 Characters

Many UTF-8 characters cannot be typed on a keyboard, but they can always be displayed using numbers (called entity numbers):

  • A is 65
  • B is 66
  • C is 67

See the Pen utf-8 char by Arpit (@soniarpit) on CodePen.

The <meta charset="UTF-8"> element defines the character set.

The characters A, B, C and D, are displayed by the numbers 65, 66, 67 and 68.

To let the browser understand that you are displaying a character, you must start the entity number with &# and end it with ; (semicolon).

Emoji Characters

Emojis are also characters from the UTF-8 alphabet:

  • 😄 is &#128516
  • 😍 is &#128525
  • 💗 is &#128151

See the Pen emoji 1 by Arpit (@soniarpit) on CodePen.

you can also copy emoji or directly type in html file like following,

See the Pen emoji 2 by Arpit (@soniarpit) on CodePen.

For a full list, please go to our HTML Emoji Reference.

Happy coding :)

Previous: #19 HTML Semantic Elements

Next: #21 HTML Forms – Basic