#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&lt;&#60;
>greater-than&gt;&#62;

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&nbsp;&#160;
¡inverted exclamation mark&iexcl;&#161;
¤currency&curren;&#164;
¢cent&cent;&#162;
£pound&pound;&#163;
¥yen&yen;&#165;
¦broken vertical bar&brvbar;&#166;
§section&sect;&#167;
¨spacing diaeresis&uml;&#168;
©copyright&copy;&#169;
ªfeminine ordinal indicator&ordf;&#170;
«angle quotation mark (left)&laquo;&#171;
¬negation&not;&#172;
­soft hyphen&shy;&#173;
®registered trademark&reg;&#174;
trademark&trade;&#8482;
¯spacing macron&macr;&#175;
°degree&deg;&#176;
±plus-or-minus &plusmn;&#177;
²superscript 2&sup2;&#178;
³superscript 3&sup3;&#179;
´spacing acute&acute;&#180;
µmicro&micro;&#181;
paragraph&para;&#182;
·middle dot&middot;&#183;
¸spacing cedilla&cedil;&#184;
¹superscript 1&sup1;&#185;
ºmasculine ordinal indicator&ordm;&#186;
»angle quotation mark (right)&raquo;&#187;
¼fraction 1/4&frac14;&#188;
½fraction 1/2&frac12;&#189;
¾fraction 3/4&frac34;&#190;
¿inverted question mark&iquest;&#191;
×multiplication&times;&#215;
÷division&divide;&#247;

ISO 8859-1 Character Entities

ResultDescriptionEntity NameNumber Code
Àcapital a, grave accent&Agrave;&#192;
Ácapital a, acute accent&Aacute;&#193;
Âcapital a, circumflex accent&Acirc;&#194;
Ãcapital a, tilde&Atilde;&#195;
Äcapital a, umlaut mark&Auml;&#196;
Åcapital a, ring&Aring;&#197;
Æcapital ae&AElig;&#198;
Çcapital c, cedilla&Ccedil;&#199;
Ècapital e, grave accent&Egrave;&#200;
Écapital e, acute accent&Eacute;&#201;
Êcapital e, circumflex accent&Ecirc;&#202;
Ëcapital e, umlaut mark&Euml;&#203;
Ìcapital i, grave accent&Igrave;&#204;
Ícapital i, acute accent&Iacute;&#205;
Îcapital i, circumflex accent&Icirc;&#206;
Ïcapital i, umlaut mark&Iuml;&#207;
Ðcapital eth, Icelandic&ETH;&#208;
Ñcapital n, tilde&Ntilde;&#209;
Òcapital o, grave accent&Ograve;&#210;
Ócapital o, acute accent&Oacute;&#211;
Ôcapital o, circumflex accent&Ocirc;&#212;
Õcapital o, tilde&Otilde;&#213;
Öcapital o, umlaut mark&Ouml;&#214;
Øcapital o, slash&Oslash;&#216;
Ùcapital u, grave accent&Ugrave;&#217;
Úcapital u, acute accent&Uacute;&#218;
Ûcapital u, circumflex accent&Ucirc;&#219;
Ücapital u, umlaut mark&Uuml;&#220;
Ýcapital y, acute accent&Yacute;&#221;
Þcapital THORN, Icelandic&THORN;&#222;
ßsmall sharp s, German&szlig;&#223;
àsmall a, grave accent&agrave;&#224;
ásmall a, acute accent&aacute;&#225;
âsmall a, circumflex accent&acirc;&#226;
ãsmall a, tilde&atilde;&#227;
äsmall a, umlaut mark&auml;&#228;
åsmall a, ring&aring;&#229;
æsmall ae&aelig;&#230;
çsmall c, cedilla&ccedil;&#231;
èsmall e, grave accent&egrave;&#232;
ésmall e, acute accent&eacute;&#233;
êsmall e, circumflex accent&ecirc;&#234;
ësmall e, umlaut mark&euml;&#235;
ìsmall i, grave accent&igrave;&#236;
ísmall i, acute accent&iacute;&#237;
îsmall i, circumflex accent&icirc;&#238;
ïsmall i, umlaut mark&iuml;&#239;
ðsmall eth, Icelandic&eth;&#240;
ñsmall n, tilde&ntilde;&#241;
òsmall o, grave accent&ograve;&#242;
ósmall o, acute accent&oacute;&#243;
ôsmall o, circumflex accent&ocirc;&#244;
õsmall o, tilde&otilde;&#245;
ösmall o, umlaut mark&ouml;&#246;
øsmall o, slash&oslash;&#248;
ùsmall u, grave accent&ugrave;&#249;
úsmall u, acute accent&uacute;&#250;
ûsmall u, circumflex accent&ucirc;&#251;
üsmall u, umlaut mark&uuml;&#252;
ýsmall y, acute accent&yacute;&#253;
þsmall thorn, Icelandic&thorn;&#254;
ÿsmall y, umlaut mark&yuml;&#255;

Other Entities Supported by HTML Browsers

ResultDescriptionEntity NameNumber Code
Œcapital ligature OE&OElig;&#338;
œsmall ligature oe&oelig;&#339;
Šcapital S with caron&Scaron;&#352;
šsmall S with caron&scaron;&#353;
Ÿcapital Y with diaeres&Yuml;&#376;
ˆmodifier letter circumflex accent&circ;&#710;
˜small tilde&tilde;&#732;
en space&ensp;&#8194;
em space&emsp;&#8195;
thin space&thinsp;&#8201;
zero width non-joiner&zwnj;&#8204;
zero width joiner&zwj;&#8205;
left-to-right mark&lrm;&#8206;
right-to-left mark&rlm;&#8207;
en dash&ndash;&#8211;
em dash&mdash;&#8212;
left single quotation mark&lsquo;&#8216;
right single quotation mark&rsquo;&#8217;
single low-9 quotation mark&sbquo;&#8218;
left double quotation mark&ldquo;&#8220;
right double quotation mark&rdquo;&#8221;
double low-9 quotation mark&bdquo;&#8222;
dagger&dagger;&#8224;
double dagger&Dagger;&#8225;
horizontal ellipsis&hellip;&#8230;
per mille &permil;&#8240;
single left-pointing angle quotation&lsaquo;&#8249;
single right-pointing angle quotation&rsaquo;&#8250;
euro&euro;&#8364;

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

Leave a Comment

Copy link
Powered by Social Snap