Using special characters in HTML

Ever wanted to use special characters in your HTML but didn't know quite how to do it? Jason Smith has heard your cries and brings you an article on using special characters in HTML.

Have you ever wanted to put a little Français on your Web page? Perhaps you are interested in changing those dull bullets to some exciting characters to spruce up your site? In this lesson, I will cover all that I know about those special little characters in HTML, known as character entity references.

We’ll start with some of the major languages
Do you know German, Spanish, French, or Italian? If so, you know that there are special characters that are contained within each language’s alphabet that do not make up part of the English language. Such examples include the German umlaut, or the Spanish tilde.

There is a tilde key on your keyboard in the upper left-hand corner, under the [Esc] key. However, you would be hard pressed to find the ñ key anywhere near the home-row keys. So, we have to improvise when adding special characters to our Web sites.

The dissection
So how can you put a special character in your Web page? I’ll explain the basic character entity reference by using this example:

This little piece of code is all you need. When you type this small snippet of code into your HTML file, the result will be an umlaut–ä.

The ampersand (&) seen in the code above is a must. That is the clue to the HTML gods that the rest of the text is code for a special character. You’ll see that the letter following the ampersand is the letter ”a.” This will be the letter we will perform the magic on. The characters located after the “a” represent what we are doing to the letter. In this particular case, we are putting an umlaut (uml) over the “a” character. Now to every beginning, there must be an end. This is where the semicolon comes into play. The semicolon tells the gods that you are done with the special character and ready to move on to normal text.

Keeping that in mind, to place an umlaut over a capital “a,” the code would be:

I bet you never thought it would be this easy. But that’s just the tip of the iceberg. Here is a chart for most of the special characters for some of the most common languages.

Table 1
ä ä   Ä Ä
ë ë   Ë Ë
ï ï   Ï Ï
ö ö   Ö Ö
ü ü   Ü Ü
ß ß      
ç ç   Ç Ç
á á   Á Á
é é   É É
í í   Í Í
ó ó   Ó Ó
ú ú   Ú Ú
ç ç   Ç Ç
ã ã   Ã Ã
õ õ   Õ Õ
ñ ñ   Ñ Ñ
¡ ¡   ¿ ¿
A special character chart for common languages

IT person in math land
There is also hope for all of you mathematicians out there. There is a slew of mathematical symbols that can be used in HTML, most of which I have never comprehended (save the simple buttons on my calculator). If you are creating a Web page that contains some mathematical formulas, you might find that some of these characters could come in handy.

Table B
° °
± ±
² ²
µ µ
Œ ¼
× ×
÷ ÷
° °
A mathematical symbol chart for mathematicians

It’s time to get creative. By looking at the table above, you’ll notice that using &frac14 creates the character Œ. Wouldn’t it stand to reason that you could display Ÿ by using &frac34? You bet it would! If you play around with these entities a little bit, you might be surprised as to what you can and will discover. After all, the light bulb was an invention of experimentation; just think of what you might come up with! As one of my most memorable teachers once said, “The key to understanding is not memorization; it’s understanding.”

Time for a little pop quiz!
All right, boys and girls, it's quiz time! See if you can figure out how to display the following samples. The answers will be given at the end of the lesson.
Ÿ      œ      32°    5×2=10

Alternatives to ordered and unordered lists
Although ordered and unordered lists do provide a more aesthetically pleasing look to your Web site, you may not like the numbers or bullets that are supplied when you type up your lists. Here are some HTML entities that you could use in place of the bulleted lists that you hold so dear to your heart.

Table C
» »
Above is a list of alternative characters than can be used in place of bullet lists.

If you don’t like any of these, then create your own! That’s right, what’s stopping you? Simply create your version of “the bullet” in MS Paint, Photoshop, or some other piece of artistic software, save the file as a .jpg, and insert that image into your document every time you want a bullet to appear. Take a look at this sample.
<img src=”mybullet.jpg”>Item 1<br>
<img src=”mybullet.jpg”>Item 2<br>
<img src=”mybullet.jpg”>Item 3<br>

Pop quiz solutions
Table D
Ÿ &Yuml;
œ &frac12;
32° 32&deg;
5×2=10 5&times;2=10
Pop quiz solutions using special characters

Now it’s your turn
I hope you enjoyed this HTML entity lesson; but keep in mind that the samples I provided for you here aren’t the only HTML character entities at your disposal. If there is a particular character you have in mind that you would like to put on your Web page, I encourage you to search the Web for HTML character entities until you find it. Here is a good place to start and find a more concise listing of these special characters: HTML 4.0 Entities.

Editor's Picks

Free Newsletters, In your Inbox