special characters

There will be times on a web page when you will want to display characters which are not available on the keyboard. For instance, how would you code the following? If you think it's easy, try it! (Note for football fans only: yes, I appreciate there's some weird time warp thing going on here.)

Result: FRANCE (1)1 (Cissé 27)      GERMANY (1)2 (Völler 16, Matthäus 73).

Or, as another example, what about this pithy little sentence which we saw back in virtual lecture 1?

¿Que?

If you want to use any symbol on a web page which does not normally appear on the keyboard you need to use special characters: officially known as character entities. Rather than typing the letters from the keyboard as normal, you need to insert, in the HTML, a code with the following format:

If you forget either the & (ampersand) or the ; (semicolon) you'll quickly realise your error as you won't see the desired symbol on the page.

For clarity I have not listed all available special characters here. Neiderst's Web Design in a Nutshell has a complete list: I have also provided you with a large sample on the special characters reference page which will open in the second browser window (thanks to Hannah Dee for doing the rather tedious work of putting that page together). The rest of this page discusses a few general points about special characters rather than trying to be an exhaustive list.

The following list does not cover all the circumstances in which you might need special characters, but it's got most of them:

• mathematical or other symbols such as © µ ¶ ½ ±.
• letters with accents or diacritical marks such as À í Ü, or letters from old English or other languages like Þ Æ ß. For these, particularly the diacritical marks, the codes follow a logical pattern. Following the ampersand you have the letter in question, in either upper or lower case, then the accent you want: acute, grave, circ(umflex), tilde, ring, cedil(la - for the letter c only), uml(aut) or slash (for the letter o only). Complete the code with the semicolon. The full list is on the reference page.
• currency symbols like ¥ € £. UK web designers are better off using the code rather than typing the £ sign straight from the keyboard. In a non-UK computing environment, the ASCII code can have other uses. It can therefore render as something else (often the hashmark, #) on a page being read by a non-UK computer. £, however, works properly on all computers.

There are also three special cases to be aware of. First of all come the codes &lt; and &gt;, which produce these < > characters respectively. The reason you need special characters for these should be pretty obvious - not least for this site, where on several occasions I want to display things such as <i>. What I'll do now is actually type in the characters themselves; and you can see what happens. In fact it's not even valid XHTML 1.0 to use the characters < and > on their own: you must always use the codes. (Let's turn those italics off, shall we?)

The next special case is the &amp; character, which you sometimes need to use in order to avoid confusion with these special character codes themselves (a kind of recursion...). Again, you are obliged to use &amp; even if all you want is the symbol.

The final special case, and a very useful one, is the &nbsp; character. This does nothing more than insert a space, known as a nonbreaking space (hence &nbsp;). Remember that you can't simply pad out your HTML with spaces, if for whatever reason you want multiple spaces to appear. This character, however, always renders as a space - so this       gap, for example, has been created with five consecutive &nbsp; characters. These are also useful for padding out otherwise empty table cells: see the page on table structure for more details.

Back to the top

Back to the menu for lesson 2