Unicode bloopers! HTML should not be visible on a web page!
By Mike Banks Valentine
Have you noticed how many web sites are showing unicode in the visible page text in place of punctuation marks? I’ve seen it on major newspaper sites and even on monstrous portals like Yahoo. I don’t know whether this comes from ignorance of the site maintainer, bad content management software, cutting and pasting directly from word processing software, or all of the above – but it can be incredibly annoying.
Reading becomes nearly impossible when you find the unicode HTML string for apostrophe ‘ or quote ” marks inserted within, or bracketing a word. If you haven't seen it here’s an “example” for everyone's mutual annoyance!
Some sites are using unicode characters for periods and question marks. While it is possible to use unicode to represent all of the alphabet, numbers, punctuation and most symbols – it just isn’t necessary to do so. Beyond that, those who are still using older browser versions will see that code on the page, instead of the characters intended to display. I’ve posted a complete chart of unicode characters and the HTML equivalent chart below.
If you’d like to know more about Unicode visit the authority site
I would encourage those who maintain their web site or those of clients to reference the proper use of those characters in your code on your web pages. If your web page software is displaying this code visibly, your software is outdated or incompatible with current standards.
Sometimes software is the enemy when updating pages. If you cut and paste text from a Microsoft Word document into a non Microsoft web page editor, it will sometimes use proprietary code from that word processing software attempting to represent it as text or simply paste unreadable gibberish into the document. It’s better to work in the Notepad plain text editor, rather than Word, if you will be pasting that text into a web page in any software other than another Microsoft product.
Microsoft has built all of it’s software to recognize the proprietary code from each of it’s other products. Outlook Express, to Internet Explorer, to Word, to Excel in each of the others within the family of Microsoft products. But as soon as you attempt to cut and paste text from a Microsoft product to a web page or any non Microsoft software, you will suddenly get strange characters appearing in the text of pages that don’t recognize the Microsoft proprietary code.
It’s not just a Microsoft problem, it also occurs when cutting and pasting from other proprietary word processing software product into web pages or email products NOT displayed in the same code base.
Unicode can be useful in web pages when the @ symbol displayed unicode equivalent of @ is posted to a web page to stop the spambot harvesting software from gathering useful email addresses from web pages. This trick is not always effective but does stop some harvesting software from recognizing those unicode symbols as valid email addresses.
Further discussion on using unicode to stop spam harvesting software is here.
I spend quite a bit of time in plain text editors like NotePad writing documents that will be transferred to a web page. The transfer of formatting simply won’t work from Word documents to a web page. Some word processing software offers the command “Save As HTML” but not all work flawlessly. Some products don’t present these web pages properly in all browsers.
Even worse is the amount of code clutter created when a Word document is saved as a web page using the “Save As HTML” command in that software (Word). I won’t burden you with showing that clutter here. Dreamweaver web design software actually has a command labeled “Clean up Word HTML” to rid the code of extraneous and unnecessary clutter created by Word during that “Save as HTML” command.
We’ve made available a very simple Text to HTML Converter for Web Publishing that allows simple conversions of plain text documents to HTML without adding unicode characters to visible text.
This great tool automates these normally tedious tasks for web publishing:
Adds mailto: to email addresses
Inserts paragraph tags
Allows ordered lists or bullets
Adds clickable hyperlinks to URL’s
Sets headings to bold text
Allows links to open in new window
All of this without inserting unicode characters into that text as some content management software does.
Web content creators need to know – and actually write HTML sometimes. I hope the Unicode chart below will help toward that end.
Just be sure that you are inserting that code into the HTML and NOT into the visible page text by becoming familiar with your software.
| Character | Unicode | HTML 4.0 | Character Name |
|---|---|---|---|
|   | space | ||
| ! | ! | exclamation mark | |
| “ | " | " | quotation mark |
| # | # | number sign | |
| $ | $ | dollar sign | |
| % | % | percent sign | |
| & | & | & | ampersand |
| ‘ | ' | apostrophe | |
| ( | ( | left parenthesis | |
| ) | ) | right parenthesis | |
| * | * | asterisk | |
| + | + | plus sign | |
| , | , | comma | |
| – | - | hyphen-minus | |
| . | . | full stop | |
| / | / | solidus | |
| 0 | 0 | number zero | |
| 1 | 1 | number one | |
| 2 | 2 | number two | |
| 3 | 3 | number three | |
| 4 | 4 | number four | |
| 5 | 5 | number five | |
| 6 | 6 | number six | |
| 7 | 7 | number seven | |
| 8 | 8 | number eight | |
| 9 | 9 | number nine | |
| : | : | colon | |
| ; | ; | semicolon | |
| < | < | < | less-than sign |
| = | = | equals sign | |
| > | > | > | greater-than sign |
| ? | ? | question mark | |
| @ | @ | commercial at | |
| A | A | Capital letter A | |
| B | B | Capital letter B | |
| C | C | Capital letter C | |
| D | D | Capital letter D | |
| E | E | Capital letter E | |
| F | F | Capital letter F | |
| G | G | Capital letter G | |
| H | H | Capital letter H | |
| I | I | Capital letter I | |
| J | J | Capital letter J | |
| K | K | Capital letter K | |
| L | L | Capital letter L | |
| M | M | Capital letter M | |
| N | N | Capital letter N | |
| O | O | Capital letter O | |
| P | P | Capital letter P | |
| Q | Q | Capital letter Q | |
| R | R | Capital letter R | |
| S | S | Capital letter S | |
| T | T | Capital letter T | |
| U | U | Capital letter U | |
| V | V | Capital letter V | |
| W | W | Capital letter W | |
| X | X | Capital letter X | |
| Y | Y | Capital letter Y | |
| Z | Z | Capital letter Z | |
| [ | [ | left square bracket | |
| \ | \ | reverse solidus | |
| ] | ] | right square bracket | |
| ^ | ^ | circumflex accent | |
| _ | _ | low line | |
| ` | ` | grave accent | |
| a | a | Lowercase letter a | |
| b | b | Lowercase letter b | |
| c | c | Lowercase letter c | |
| d | d | Lowercase letter d | |
| e | e | Lowercase letter e | |
| f | f | Lowercase letter f | |
| g | g | Lowercase letter g | |
| h | h | Lowercase letter h | |
| i | i | Lowercase letter i | |
| j | j | Lowercase letter j | |
| k | k | Lowercase letter k | |
| l | l | Lowercase letter l | |
| m | m | Lowercase letter m | |
| n | n | Lowercase letter n | |
| o | o | Lowercase letter o | |
| p | p | Lowercase letter p | |
| q | q | Lowercase letter q | |
| r | r | Lowercase letter r | |
| s | s | Lowercase letter s | |
| t | t | Lowercase letter t | |
| u | u | Lowercase letter u | |
| v | v | Lowercase letter v | |
| w | w | Lowercase letter w | |
| x | x | Lowercase letter x | |
| y | y | Lowercase letter y | |
| z | z | Lowercase letter z | |
| { | { | left curly bracket | |
| | | | | vertical line | |
| } | } | right curly bracket | |
| ~ | ~ | tilde | |
| 127 | (not used) | ||
| ??? | € | € | euro sign |
| 129 | (not used) | ||
| ??? | ‚ | ‚ | single low-9 quotation mark |
| ?? | ƒ | ƒ | Lowercase letter f with hook |
| ??? | „ | „ | double low-9 quotation mark |
| ??? | … | … | horizontal ellipsis |
| ??? | † | † | dagger |
| ??? | ‡ | ‡ | double dagger |
| ?? | ˆ | ˆ | modifier letter circumflex accent |
| ??? | ‰ | ‰ | per mille sign |
| ?? | Š | Š | Capital letter S with caron |
| ??? | ‹ | ‹ | single left-pointing angle quotation mark |
| ?? | Π| Π| Capital ligature OE |
| 141 | (not used) | ||
| ?? | Ž | Capital letter Z with caron | |
| 143 | (not used) | ||
| 144 | (not used) | ||
| ??? | ‘ | ‘ | left single quotation mark |
| ??? | ’ | ’ | right single quotation mark |
| ??? | “ | “ | left double quotation mark |
| ??? | ” | ” | right double quotation mark |
| ??? | • | • | bullet |
| ??? | – | – | en dash |
| ??? | — | — | em dash |
| ?? | ˜ | ˜ | small tilde |
| ??? | ™ | ™ | trade mark sign |
| ?? | š | š | Lowercase letter s with caron |
| ??? | › | › | single right-pointing angle quotation mark |
| ?? | œ | œ | Lowercase ligature oe |
| 157 | (not used) | ||
| ?? | ž | Lowercase letter z with caron | |
| ?? | Ÿ | Ÿ | Capital letter Y with diaeresis |
|   | | no-break space | |
| ?? | ¡ | ¡ | inverted exclamation mark |
| ?? | ¢ | ¢ | cent sign |
| ?? | £ | £ | pound sign |
| ?? | ¤ | ¤ | currency sign |
| ?? | ¥ | ¥ | yen sign |
| ?? | ¦ | ¦ | broken bar |
| ?? | § | § | section sign |
| ?? | ¨ | ¨ | diaeresis |
| ?? | © | © | copyright sign |
| ?? | ª | ª | feminine ordinal indicator |
| ?? | « | « | left-pointing double angle quotation mark |
| ?? | ¬ | ¬ | not sign |
| ?? | ­ | ­ | soft hyphen |
| ?? | ® | ® | registered sign |
| ?? | ¯ | ¯ | macron |
| ?? | ° | ° | degree sign |
| ?? | ± | ± | plus-minus sign |
| ?? | ² | ² | superscript two |
| ?? | ³ | ³ | superscript three |
| ?? | ´ | ´ | acute accent |
| ?? | µ | µ | micro sign |
| ?? | ¶ | ¶ | pilcrow sign |
| ?? | · | · | middle dot |
| ?? | ¸ | ¸ | cedilla |
| ?? | ¹ | ¹ | superscript one |
| ?? | º | º | masculine ordinal indicator |
| ?? | » | » | right-pointing double angle quotation mark |
| ?? | ¼ | ¼ | vulgar fraction one quarter |
| ?? | ½ | ½ | vulgar fraction one half |
| ?? | ¾ | ¾ | vulgar fraction three quarters |
| ?? | ¿ | ¿ | inverted question mark |
| ?? | À | À | Capital letter A with grave |
| ?? | Á | Á | Capital letter A with acute |
| ?? | Â | Â | Capital letter A with circumflex |
| ?? | Ã | Ã | Capital letter A with tilde |
| ?? | Ä | Ä | Capital letter A with diaeresis |
| ?? | Å | Å | Capital letter A with ring above |
| ?? | Æ | Æ | Capital letter AE |
| ?? | Ç | Ç | Capital letter C with cedilla |
| ?? | È | È | Capital letter E with grave |
| ?? | É | É | Capital letter E with acute |
| ?? | Ê | Ê | Capital letter E with circumflex |
| ?? | Ë | Ë | Capital letter E with diaeresis |
| ?? | Ì | Ì | Capital letter I with grave |
| ?? | Í | Í | Capital letter I with acute |
| ?? | Î | Î | Capital letter I with circumflex |
| ?? | Ï | Ï | Capital letter I with diaeresis |
| ?? | Ð | Ð | Capital letter Eth |
| ?? | Ñ | Ñ | Capital letter N with tilde |
| ?? | Ò | Ò | Capital letter O with grave |
| ?? | Ó | Ó | Capital letter O with acute |
| ?? | Ô | Ô | Capital letter O with circumflex |
| ?? | Õ | Õ | Capital letter O with tilde |
| ?? | Ö | Ö | Capital letter O with diaeresis |
| ?? | × | × | multiplication sign |
| ?? | Ø | Ø | Capital letter O with stroke |
| ?? | Ù | Ù | Capital letter U with grave |
| ?? | Ú | Ú | Capital letter U with acute |
| ?? | Û | Û | Capital letter U with circumflex |
| ?? | Ü | Ü | Capital letter U with diaeresis |
| ?? | Ý | Ý | Capital letter Y with acute |
| ?? | Þ | Þ | Capital letter Thorn |
| ?? | ß | ß | Lowercase letter sharp s |
| ?? | à | à | Lowercase letter a with grave |
| ?? | á | á | Lowercase letter a with acute |
| ?? | â | â | Lowercase letter a with circumflex |
| ?? | ã | ã | Lowercase letter a with tilde |
| ?? | ä | ä | Lowercase letter a with diaeresis |
| ?? | å | å | Lowercase letter a with ring above |
| ?? | æ | æ | Lowercase letter ae |
| ?? | ç | ç | Lowercase letter c with cedilla |
| ?? | è | è | Lowercase letter e with grave |
| ?? | é | é | Lowercase letter e with acute |
| ?? | ê | ê | Lowercase letter e with circumflex |
| ?? | ë | ë | Lowercase letter e with diaeresis |
| ?? | ì | ì | Lowercase letter i with grave |
| ?? | í | í | Lowercase letter i with acute |
| ?? | î | î | Lowercase letter i with circumflex |
| ?? | ï | ï | Lowercase letter i with diaeresis |
| ?? | ð | ð | Lowercase letter eth |
| ?? | ñ | ñ | Lowercase letter n with tilde |
| ?? | ò | ò | Lowercase letter o with grave |
| ?? | ó | ó | Lowercase letter o with acute |
| ?? | ô | ô | Lowercase letter o with circumflex |
| ?? | õ | õ | Lowercase letter o with tilde |
| ?? | ö | ö | Lowercase letter o with diaeresis |
| ?? | ÷ | ÷ | division sign |
| ?? | ø | ø | Lowercase letter o with stroke |
| ?? | ù | ù | Lowercase letter u with grave |
| ?? | ú | ú | Lowercase letter u with acute |
| ?? | û | û | Lowercase letter with circumflex |
| ?? | ü | ü | Lowercase letter u with diaeresis |
| ?? | ý | ý | Lowercase letter y with acute |
| ?? | þ | þ | Lowercase letter thorn |
| ?? | ÿ | ÿ | Lowercase letter y with diaeresis |