HTML Special Characters

Now that we've spent some time learning HTML you will no doubt have noticed that HTML code is punctuated by characters such as less-than signs (<) and greater-than signs (>). Unfortunately this can cause problems when we want to include these symbols within the actual body of our pages. To get around this problem we need to use special character codes. Special character codes act as a direct replacement for these incompatible characters; when the web browser processes the page it will display them as they should look. Using them ensures we avoid any potential problems we may encounter when using characters.

As an example, let's say we want to include a less-than symbol in our page text. If we just typed it as usual it may cause errors in the way the page is displayed, so instead we use the special character code &lt; in its place. This will produce a correctly formatted less-than sign like this: <.

As well as replacing problematic characters, there are also HTML special character codes for producing a vast array of symbols which we would not normally be able to produce using a standard keyboard. Below is a list of some of the most useful HTML special characters as well as the codes you need to use to produce them:

Symbol Code Description
< &lt; Less than
> &gt; Greater than
& &amp; Ampersand
" &quot; Quote marks
  &nbsp; Space (see below)
¢ &cent; Cent sign
£ &pound; Pound sign
¥ &yen; Yen sign
© &copy; Copyright symbol
® &reg; Registered trademark
&trade; Trademark
° &deg; Degree symbol
× &times; Multiply
÷ &divide; Divide
¼ &frac14; 1/4 fraction
½ &frac12; 1/2 fraction
¾ &frac34; 3/4 fraction

A quick note on the space symbol &nbsp;. Don't get worried and start to think you have to use it to replace every space in your text. Despite the fact that this would be incredibly hard work, the code would soon become unreadable, and HTML is designed to be simple! You'll be glad to hear that you can carry on using spaces as normal; this symbol is mainly useful for when you want to have a blank cell in a table. If you just use a completely empty cell like <td></td>, this can sometimes cause problems with the way the table is displayed. It won't be too serious, but it can make it look a bit different to how you intended. To fix the problem you simply need to insert a space using &nbsp; and the cell will display properly.