Part 1: character entities for HTML

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.)

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

These characters will look the same from computer to computer. (Use a fixed-width font for ASCII-art and charts) Courier, FixedSys, Monaco and the generic monospace are examples of non-proportional or fixed width fonts and are used for drawing ASCII-art and making charts. It is ill advised to use Times New Roman, Times, Symbol or any other proportional width fonts for drawing ASCII-art or making charts.

&#032;3&#051;F&#070;Y&#089;l&#108;!&#033;4&#052;G&#071;Z&#090;m&#109;"&#034;5&#053;H&#072;[&#091;n&#110;#&#035;6&#054;I&#073;\&#092;o&#111;$&#036;7&#055;J&#074;]&#093;p&#112;%&#037;8&#056;K&#075;^&#094;q&#113;&&amp;9&#057;L&#076;_&#095;r&#114;'&#039;:&#058;M&#077;`&#096;s&#115;(&#040;;&#059;N&#078;a&#097;t&#116;)&#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.

Some people prefer named entities rather than numbered because they are easier to remember.

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:

For WordPress Users

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

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.

extended characters – A Cautionary Tale

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….)