When you type text into any reasonably modern word processing program, even though your keyboard key shows that ubiquitous ASCII double quote symbol, you see nice “curly” opening and closing punctuation marks when you hit it.
These special quotes can’t be found on your keyboard. But word processing programs understand that when you put something in quotes, you want nice left and right quotes, and it replaces the characters you typed in with the correct ones. The same goes with apostrophes. Have you ever seen an ASCII apostrophe like the one on your keyboard in a book or brochure? Of course not. What we usually see in printed material is a closing single quote. In fact, there exists a vast array of characters that aren’t represented on a standard keyboard, though these characters show up on web pages and in printed material.
Now, that’s all well and good for people using word processors. But for those of us typing text into an HTML document, there’s no system to automatically replace the characters from our keyboards with their grammatically correct equivalents. Depending on which type of character encoding your web site uses, when you paste these characters directly into an HTML document, you may see a bunch of gibberish on the rendered page. Also, the inclusion in text of characters that are used by HTML, like
>, will wreak havoc in your page, as they cause the beginning or ending of HTML code.
For these reasons, a series of special codes or entities has been created—we type these into our HTML documents to produce correct punctuation marks and just about any special character that we could need. The examples in the table below are just a sample of the many HTML character codes that exist.
The code on the far left is known as an entity name or keyword. For instance, to produce a copyright symbol in your document, enter
copy directly into your HTML; you’ll see a © in the rendered page. Each of these entities also has a numerical equivalent; the numerical equivalent of copy is #169 which produces the same symbol.
Sample list of HTML character entity references
|‘||‘||Left single quote|
|’||‘||Right single quote|
|“||“||Left double quote|
|”||“||Right double quote|
|«||«||Left angle quote|
|»||»||Right angle quote|
For a more complete list of codes and their alternative entity numbers, check out W3Schools’ HTML Entities page.
We’ve all had adventures using special characters online. What pitfalls have you fallen prey to? And what advice can you give to help others avoid them?
Jason Beaird is a designer and front-end developer with over ten years of experience working on a wide range of award-winning web projects. With a background in graphic design and a passion for web standards, he’s always looking for accessible ways to make the Web a more beautiful place. When he’s not pushing pixels in Photoshop or tinkering with markup, Jason loves sharing his passion for the Web with others.