22 - Character Entities

Some characters like ‘<’ and ‘<’ are reserved in HTML. The browser might get confused whether to interpret them as character or tags. So, we use character entities to display such reserved characters.

 The ASCII character set (a 128 character encoding scheme used widely to represent text and other symbols in computers etc) is not sufficient for web, so HTML uses a better & complete character set called “Universal character Set (UCS)”

Some characters may not be directly typed from your keyboard, this chapter addresses those issues of how those characters may be represented in your web pages.

To display a character entity we should follow any one of the following syntax,

&entity_name;
(or)
&#entity_number;

An Example

To display greater than symbol we have to use either &gt; or &#62;

Most used character Entity

Usually browser truncates extra spaces while displaying the output. If you really need to add spaces in the output, HTML provides us with Non-breaking space entity. It is one of the most commonly used and an important character entity.

It is represented as &nbsp; or &#160;

Example program

<html>
  <body>
    <p>This Para has                      10 spaces but only one space is displayed.</p>
      The following line is displayed using Non breaking spaces
    <p>This Para has &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 10 spaces , all are displayed </p>        
  </body>
</html>

The output of the above program would be

To display characters like à or Ò etc which are used for representing accents we use a combination of alphanumeric character and the entity number. The symbol above the alphabet is called “diacritical mark” like grave ( ̀ ) and acute (  ́)  .

The following are some of the important entities

Character

Description

Entity Name

Entity Number

 

non-breaking space

&nbsp;

&#160;

less than

&lt;

&#60;

greater than

&gt;

&#62;

&

ampersand

&amp;

&#38;

¢

cent

&cent;

&#162;

£

pound

&pound;

&#163;

¥

yen

&yen;

&#165;

euro

&euro;

&#8364;

©

copyright

&copy;

&#169;

®

registered trademark

&reg;

&#174;

The following is the list of the character entities for accents and diacritics from Western European languages

Character

Description

Entity Name

Entity Number

À

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;

Points to remember:

  • The entity names are case sensitive, &nbsp; and &NBSP; are different.
  • Always prefer Entity numbers to Entity names because they are easy to remember and enjoy wider browser support than entity numbers.

We also have symbol entities in HTML which are used for displaying symbols like arrows, spades, clubs, mathematical operators etc which we will learn in the next chapter.

Like us on Facebook