Printed from TeacherJohn.com • http://teacherjohn.com/tutorials/specialcharacters.php

Commonly Used Special HTML Characters

What is a “special character”?

Examples of special characters include curly quotation marks, copyright symbols, bullets, and accented letters. Generally, a special character requires the use of a modifier key other than the shift key, such as the option key on a Mac or the alt key on Windows. For example, to make a curly apostrophe (a right single quote) on a Mac, one must hold down both the option and shift keys while typing a closing square bracket. In Windows, to make an apostrophe one must hold down the alt key while entering 0146 from the numeric keypad.

Additionally, the opening (<) and closing (>) angle brackets, and the ampersand (&), have special uses in HTML code, and so are considered special in their own right.

Using special characters in Web pages

There are basically two ways to use a special character in a Web page: (1) by typing the character directly into your document using the Mac or Windows keystrokes listed in the charts below (which means you must also include the proper character encoding meta tag, and save the document with the same character encoding that is used by the Web server); or (2) by using the character code, or HTML “character entitiy,” for the special character in your HTML.

Method 1: Typing characters directly into the document

When using this method of typing the special characters directly into your document, it is important that the server’s character encoding setting, your page’s character encoding meta tag, and the actual character encoding of the document all match. This is explained in detail in my tutorial Character Encoding for Web Pages. To properly configure your text editor’s character encoding, see Text Editors for HTML and Script Editing.

On the Macintosh, the option key acts as a modifier key, in the same manner as the shift key. To make a special character, hold down the option key (or, in some cases, hold down both the option key and the shift key) and and press another key simultaneously.

On Windows, the alt key acts as a modifier, in the same manner as the shift key. To make a special character, hold down the alt key and type in a four-digit number from the numeric keypad. You must use the numeric keypad, not the numbers across the top of the keyboard.

Method 2: Using character codes in HTML

To use this method, simply type the character code in your HTML in place of the character, and the browser will display the special character. There are two systems of character codes used to specify a special character: using its name code, or using its number code. While using the name is easier to remember, using the number is slightly safer because of older browser support.

Sample usage of character codes

Without using special characters   Using special characters
Francois said: "If I show you my 'hand-coded' resume -- even if it's bad -- would you still hire me...please?" François said: “If I show you my ‘hand-coded’ résumé — even if it’s bad — would you still hire me…please?”
HTML code HTML code (using the character numbers)
<p>Francois said: "If I show you my 'hand-coded' resume -- even if it's bad -- would you still hire me...please?"</p> <p>Fran&#231;ois said: &#8220;If I show you my &#8216;hand-coded&#8217; r&#233;sum&#233;&#8212; even if it&#8217;s bad &#8212; would you still hire me&#8230;please?&#8221;</p>

Charts of the most common and useful special characters

The following are charts of the most common and useful special HTML characters. Besides using this page as an HTML reference, you can vew this page with different browsers to see how the browsers render these characters when using the character codes — in other words, how the browsers translate these character codes into the glyphs that the browsers display.

Common punctuation

Character
number
entity
Glyph
your
browser
displays
  Character
name
entity
Glyph
your
browser
displays
  Description   Mac
keystrokes
Windows
keystrokes
&#160; x x &nbsp; x x non-breaking space   alt + 0160
&#8216; &lsquo; left single quotation* option - ] alt + 0145
&#8217; &rsquo; right single quotation* option - shift - ] alt + 0146
&#8220; &ldquo; left double quotation* option - [ alt + 0147
&#8221; &rdquo; right double quotation* option - shift - [ alt + 0148
&#8230; &hellip; horizontal ellipsis* option - ; alt + 0133
&#8211; &ndash; en dash* option - hyphen alt + 0150
&#8212; &mdash; em dash* option - shift -hyphen alt + 0151
&#8194; xx &ensp; xx en space**    
&#8195; xx &emsp; xx em space**    
&#8201; xx &thinsp; xx thin space**    
&#173; ­ &shy; ­ soft hyphen**   alt + 0173

The space characters above are shown between gray "x" letters, so you can see how wide the space is rendered by your browser.

*character name definition not supported by Netscape 4 (use the character number).
**not supported at all by many older browsers, including Netscape 4.

Common symbols

Character
number
entity
Glyph
your
browser
displays
  Character
name
entity
Glyph
your
browser
displays
  Description   Mac
keystrokes
Windows
keystrokes
&#38; & &amp; & ampersand    
&#60; < &lt; < less-than sign    
&#62; > &gt; > greater-than sign    
&#8226; &bull; bullet* option - 8 alt + 0149
&#169; © &copy; © copyright sign option - g alt + 0169
&#174; ® &reg; ® registered trademark option - r alt + 0174
&#8482; &trade; trademark sign* option - 2 alt + 0153
&#176; ° &deg; ° degree sign option - shift - 8 alt + 0176
&#162; ¢ &cent; ¢ cent sign option - 4 alt + 0162
&#163; £ &pound; £ pound sign option - 3 alt + 0163
&#165; ¥ &yen; ¥ yen sign option - y alt + 0165
&#8364; &euro; euro sign** option - shift - 2 alt + 0128
&#167; § &sect; § section sign option - 6 alt + 0167
&#182; &para; pilcrow (paragraph) sign option - 7 alt + 0182

*character name definition not supported by Netscape 4 (use the character number).
**may not be supported in older fonts.

Characters useful for other languages

Character
number
entity
Glyph
your
browser
displays
  Character
name
entity
Glyph
your
browser
displays
  Description   Mac
keystrokes
Windows
keystrokes
&#191; ¿ &iquest; ¿ inverted question option - shift - ? alt + 0191
&#161; ¡ &iexcl; ¡ inverted exclamation option - 1 alt + 0161
&#223; ß &szlig; ß small sharps option - s alt + 0223
&#225; á &aacute; á small a with acute option - e, then a alt + 0225
&#231; ç &ccedil; ç small c with cedilla option - c alt + 0231
&#232; è &egrave; è small e with grave option - `, then e alt + 0232
&#233; é &eacute; é small e with acute option - e, then e alt + 0233
&#234; ê &ecirc; ê small e with circumflex option - i, then e alt + 0234
&#235; ë &euml; ë small e with diaeresis option - u, then e alt + 0235
&#237; í &iacute; í small i with acute option - e, then i alt + 0237
&#241; ñ &ntilde; ñ small n with tilde option - n, then n alt + 0241
&#243; ó &oacute; ó small o with acute option - e, then o alt + 0243
&#250; ú &uacute; ú small u with acute option - e, then u alt + 0250
&#252; ü &uuml; ü small u with diaeresis option - u, then u alt + 0252

For more information