Brian Emershaw

Simple HTML Tutorials – Using Special HTML Characters

Oftentimes, you’ll need to use some common codes such as the copyright or registered trademark symbols as part of either the population of your products, or in the footer of the website. These symbols are normally hidden in your typefaces as special characters that would either be automatically replaced in the document by your word processor, by holding a modifier key, or by opening a character map on your computer and pasting it in place. Since HTML was created to be a simple, text-only language, it doesn’t recognize those characters the same way that a complex word processor does. This is further confounded by differences in the way type works on a PC, a Mac, and a Linux computer. In order to display the characters properly in a web browser on all platforms, there are simple codes that need to be entered rather than copying and pasting the actual special character from your word processing software.

Here is a list of some common special characters, and how to type them in HTML so that web browsers on all platforms know how to display them properly.

Desired Symbol: Symbol Name: You Type:
© Copyright Symbol ©
® Registered Symbol ®
Trademark Symbol ™
68° Degrees Symbol °
½ One Half – Fraction ½
¼ One Quarter – Fraction ¼

In the case of a copyright mark, the information you populate would look something like this:
©2009 – 2010 Company Name, All Rights Reserved

Which would display as:
©2009-2010 – Company Name, All Rights Reserved
on your published pages when customers visit your store.

Proper use of this small list of special character codes should get you most of the way there. If you are populating your store with product descriptions that are in another language, or if you would like to research additional characters, you can find an extensive list here: http://www.utexas.edu/learn/html/spchar.html.

One of the special characters I didn’t mention above is called a non-breaking space. It is represented in your content as   and its primary intent is to tell the browser specifically not to let a sentence break onto the next line at that point. You might use it between a two word company name if you don’t want it displaying on two separate lines; for example: Solid Cactus. You’ll also need to use it in an empty table cell to maintain compatibility with older browsers.

The thing to keep in mind with this character is that different browsers handle it in different ways, so you don’t want to overuse it in an attempt to force something to display the way you’d like. For example, stacking three or four of them in a row just before a paragraph might seem like a good idea to create an indent. However, you will likely create unexpected results depending on the browser being used, as some browsers collapse multiple, concurrent non-breaking spaces into a single space. The ultimate goal here is to maintain uniformity in your content so all browsers render it in a similar way.

2 Responses to “Simple HTML Tutorials – Using Special HTML Characters”

  1. [...] This post was mentioned on Twitter by Solid Cactus Web.com, Cactus_Robyn and Cactus_Robyn, Eleni Konstas. Eleni Konstas said: RT @solidcactus: Simple HTML tutorials for your Yahoo! Store http://bit.ly/h3roPJ How to use special characters [...]

  2. Recent Blogroll Additions……

    [...]usually posts some very interesting stuff like this. If you’re new to this site[...]……

Leave a Reply