Character Entities

Getting Started With Your Website:

Part 1: character entities for HTML

recommended for encoding . standard characters . extended characters (includes accented letters) . cautionary tale about extended characters . encoding examples

Because the symbols " ' & < > (double and single quotation marks, ampersand, lessthansymbol and greaterthansymbol) are integral to HTML code itself, WordPress handily replaces all instances of " ' < > that are used for anything other than the code itself so that there is no chance for any confusion in the coding. (Please note that for some unknown reason, the ampersand is not replaced by a character entity in WordPress.)

However, there are times when it is useful to be able to go right into the HTML coding to employ character entities to replace characters yourself. (Screenshot for WordPress Users)

For instance, you may want to replace some of the characters in e-mail addresses that appear on your webpages. This can help to prevent robots from mining the addresses for spam purposes. In the HTML side of WordPress page coding, replace the character with &#numberofcharacter; (ampersand, hashmark, numberofcharacter, semicolon). Instead of @, you would type &#064;. There are examples of HTML code using character entities at the bottom of the page.

ASCII stands for "American Standard Code Information Interchange". The numbers of the characters can be found by referring to the character map on your computer. The characters numbered from #032 to #126 are common to all keyboard systems. (#032 is the spacebar and is not the recommended character entity to depict a non-breaking space.)

 
Character and Name     Character Entity
_______________________________________
&   ampersand            &   
<   lessthan             &lt;    
>   greaterthan          &gt;    
"   quotation mark       &quot;  
'   apostrophe           &#039;  
@   at                   &#064;  
©   Copyright            &copy;  
 
Use &nbsp; to indicate a nonbreaking space in HTML.

N.B. The folks at w3c now recommend that if accented characters are to be used, the UTF-8 charset be used. (You’ll notice that your WordPress installation already has this as its default character set. Only the characters & (ampersand) should be encoded. The others can generally be typed as is.

That being said, it is probably still a good idea to encode the @ symbol especially if the mailto: link is used. Please see the recommended for encoding section.

standard characters

recommended for encoding . standard characters . extended characters (includes accented letters) . cautionary tale about extended characters . encoding examples

        3  3    F  F    Y  Y    l  l
!  !    4  4    G  G    Z  Z    m  m
"  "    5  5    H  H    [  [    n  n
#  #    6  6    I  I    \  \    o  o
$  $    7  7    J  J    ]  ]    p  p
%  %    8  8    K  K    ^  ^    q  q
&  &     9  9    L  L    _  _    r  r
'  '    :  :    M  M    `  `    s  s
(  (    ;  &#059;    N  N    a  a    t  t
)  &#041;    <  &#060;    O  &#079;    b  &#098;    u  &#117;
*  &#042;    =  &#061;    P  &#080;    c  &#099;    v  &#118;
+  &#043;    >  &#062;    Q  &#081;    d  &#100;    w  &#119;
,  &#044;    ?  &#063;    R  &#082;    e  &#101;    x  &#120;
-  &#045;    @  &#064;    S  &#083;    f  &#102;    y  &#121;
.  &#046;    A  &#065;    T  &#084;    g  &#103;    z  &#122;
/  &#047;    B  &#066;    U  &#085;    h  &#104;    {  &#123;
0  &#048;    C  &#067;    V  &#086;    i  &#105;    |  &#124;
1  &#049;    D  &#068;    W  &#087;    j  &#106;    }  &#125;
2  &#050;    E  &#069;    X  &#088;    k  &#107;    ~  &#126;

#032 is the space bar.

"  quotation mark     "  or  "   
&  ampersand          &  or  &    
'  single quote       '  or  '   
<  less than          &#060;  or  &lt;     
>  greater than       &#062;  or  &gt;     

N.B. apos; is NOT fully supported - use #039; instead

encoding examples

recommended for encoding . standard characters . extended characters (includes accented letters) . cautionary tale about extended characters . encoding examples

The following example shows how to encode some characters on an HTML page – note the extra space between "address" and the e-mail address itself. (the characters displayed with character entities are in bold).

HTML code using numbered entities for and email address with link on the address:

e-mail address   <person@IP.com>

Here it is again using named entities. (The equivalent named entities for #046; and #064; are not supaported by all OS.)

HTML code using named and numbered entities with a mail link on the e-mail address:

e-mail address   <person@IP.com>

Here is another example using named character entities.

HTML code for fractions and an accented letter:

…¾ English & ¼ français

For WordPress Users

1. If you would like to add character entities – or any other HTML coding – to your page or post: Go to the WordPress administration area for pages or posts and select the “text” tab.
   

   WordPress Administration Area – formatting pages and posts

2. Copy and paste the HTML coding you would like to use. Please note that in this “text” section of WordPress, the editor is still somewhat WYSIWYG; line breaks will be honoured rather than ignored as on a real HTML document.

Please read more on the w3c Internationalization page and WordPress Codex: Fun Character Entities
.

extended characters – A Cautionary Tale

recommended for encoding . standard characters . extended characters (includes accented letters) . cautionary tale about extended characters . encoding examples

The characters numbered from #127 to #255 (and higher) are not common to all keyboard systems and can look quite different on different operating systems. Please bear that in mind when you use these characters.

Here is an example using the character #189. These will look different depending on whether you are viewing this page on a PC or a Mac or a….

After looking at the character map on my PC, it looks like #189 in "Symbol" font will show a "vertical bar".

Symbol font with #189: ½

But when I look at it here on the webpage, even though this computer has the symbol font installed, I see a "one half" symbol in Firefox. The "vertical bar" (but at a slant) appears in Chrome.  (Please see "standard characters" for the character entity for |: vertical bar)

Here is the character #189 in a "sans-serif" font:
½

In this case, on my PC, as expected, I see a "one half" symbol, but depending on your OS, you might be seeing an asterisk, or the symbol for Pi, or ?, or ….

Here is the character #189 in the "wingdings" font: ½
On my PC, on Chrome, I see an "analogue clock" symbol showing 07:00. On Firefox I see 1/2. Anyone who doesn’t have the wingdings font installed will see "one half" (or maybe an asterisk, or the symbol for Pi, or….)

Part 2: extended character entities