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çois said: “If I show
you my ‘hand-coded’ résumé—
even if it’s
bad — would you still hire me…please?”</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 |
|||
---|---|---|---|---|---|---|---|---|---|
  | x x | | x x | non-breaking space | alt + 0160 | ||||
‘ | ‘ | ‘ | ‘ | left single quotation* | option - ] | alt + 0145 | |||
’ | ’ | ’ | ’ | right single quotation* | option - shift - ] | alt + 0146 | |||
“ | “ | “ | “ | left double quotation* | option - [ | alt + 0147 | |||
” | ” | ” | ” | right double quotation* | option - shift - [ | alt + 0148 | |||
… | … | … | … | horizontal ellipsis* | option - ; | alt + 0133 | |||
– | – | – | – | en dash* | option - hyphen | alt + 0150 | |||
— | — | — | — | em dash* | option - shift -hyphen | alt + 0151 | |||
  | x x |   | x x | en space** | |||||
  | x x |   | x x | em space** | |||||
  | x x |   | x x | thin space** | |||||
­ | | ­ | | 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 |
|||
---|---|---|---|---|---|---|---|---|---|
& | & | & | & | ampersand | |||||
< | < | < | < | less-than sign | |||||
> | > | > | > | greater-than sign | |||||
• | • | • | • | bullet* | option - 8 | alt + 0149 | |||
© | © | © | © | copyright sign | option - g | alt + 0169 | |||
® | ® | ® | ® | registered trademark | option - r | alt + 0174 | |||
™ | ™ | ™ | ™ | trademark sign* | option - 2 | alt + 0153 | |||
° | ° | ° | ° | degree sign | option - shift - 8 | alt + 0176 | |||
¢ | ¢ | ¢ | ¢ | cent sign | option - 4 | alt + 0162 | |||
£ | £ | £ | £ | pound sign | option - 3 | alt + 0163 | |||
¥ | ¥ | ¥ | ¥ | yen sign | option - y | alt + 0165 | |||
€ | € | € | € | euro sign** | option - shift - 2 | alt + 0128 | |||
§ | § | § | § | section sign | option - 6 | alt + 0167 | |||
¶ | ¶ | ¶ | ¶ | 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 |
|||
---|---|---|---|---|---|---|---|---|---|
¿ | ¿ | ¿ | ¿ | inverted question | option - shift - ? | alt + 0191 | |||
¡ | ¡ | ¡ | ¡ | inverted exclamation | option - 1 | alt + 0161 | |||
ß | ß | ß | ß | small sharps | option - s | alt + 0223 | |||
á | á | á | á | small a with acute | option - e, then a | alt + 0225 | |||
ç | ç | ç | ç | small c with cedilla | option - c | alt + 0231 | |||
è | è | è | è | small e with grave | option - `, then e | alt + 0232 | |||
é | é | é | é | small e with acute | option - e, then e | alt + 0233 | |||
ê | ê | ê | ê | small e with circumflex | option - i, then e | alt + 0234 | |||
ë | ë | ë | ë | small e with diaeresis | option - u, then e | alt + 0235 | |||
í | í | í | í | small i with acute | option - e, then i | alt + 0237 | |||
ñ | ñ | ñ | ñ | small n with tilde | option - n, then n | alt + 0241 | |||
ó | ó | ó | ó | small o with acute | option - e, then o | alt + 0243 | |||
ú | ú | ú | ú | small u with acute | option - e, then u | alt + 0250 | |||
ü | ü | ü | ü | small u with diaeresis | option - u, then u | alt + 0252 |
For more information
- Character entity references in HTML 4
(the official complete list of special characters from the W3C)
http://www.w3.org/TR/REC-html40/sgml/entities.html - A Simple Character Entity Chart
(easier to use than the W3C reference)
http://evolt.org/article/A_Simple_Character_Entity_Chart/17/21234/ - The Trouble with EM ’n EN
http://www.alistapart.com/stories/emen/ - A tutorial on character code issues
http://www.cs.tut.fi/~jkorpela/chars.htm - Typing Accents & Special Characters
http://tlt.its.psu.edu/suggestions/international/accents/ - The ISO Latin 1 character repertoire - a description with
usage notes
http://www.cs.tut.fi/~jkorpela/latin1/index.html