How to Use Correct Typographical Symbols on Your Website

Typographical symbols (or character entities) include quotation marks, greater than and less than signs, dashes, copyright signs and other symbols. Using them correctly on your website is crucial to your business' image.

Instructions

Difficulty: Moderately Easy

Things You’ll Need:

• A basic knowledge of HTML

A Character by Any Other Name

1. These are invalid character entities Early HTML tools used codes ranging from 129 to 159 (see image) to create many common characters. These are invalid characters, and should not be used. Numeric character codes smaller than 129 or more than 159 are acceptable. Numeric codes are sometimes called decimal codes.
2. A few examples of named entity codes and numeric codes There are also named entities (see image). These work fairly well in some browsers, but are not as reliable in all browsers as the numeric codes.
3. Commonly used numeric codes Since numeric codes are the most reliable, the best option is to rely on them exclusively. This will give more satisfactory results cross browser. To use these codes, simply type them into your HTML wherever you want the symbol to appear. Examples of the more commonly used are shown in the image. An exhaustive list of all the possible character codes can be found at the W3C.
4. The en and em dash need to be singled out. They are often misunderstood and misused. Many people use a hyphen (or sometimes two hyphens) when what they actually need is an en or an em dash. An em dash signifies a break in thought or a parenthetical thought. There are no spaces around it. For example, go to the store for bread—and don't play on the way.
   
   An en dash is used to indicate range, for example July 3–7 is the holiday weekend.
5. HTML including the left and right quotation mark code Other commonly confused and misused characters involve using inch marks (") instead of actual left (“) and right (”) quotation marks. In most HTML editors, if you use the keyboard to type what appears to be a double quote character, you actually get the inch marks. If you want to use correct typographical symbols, type the character codes in the HTML, as in the image.
6. HTML won't validate when the wrong characters are used If you are troubled by unencoded ampersands, as in the image, that prevent your web page from validating, you're not alone. The problem comes from the fact that HTML code you copy from sites (such as amazon.com) is created using database information that strings information together with ampersands (&). The solution is to replace each ampersand with its numeric code (see the image in step two) before you publish the page.

Tips & Warnings

• A hyphen isn't actually a dash at all. It is used to join words or to separate syllables. For example, a money-saving offer, or a re-education in the basics of punctuation.
• You will also find helpful "A Simple Character Entity Chart" from Evolt. (See resources for links). Evolt's chart is much simplified and also shows you how the character looks–something the W3C chart does not do.