Business

Displaying Special Characters Using HTML

Overview

As a business owner, being able to publish your content to the web represents an incredible distribution opportunity. The evolution of web publishing has allowed for nearly any printed materials to be distributed online, often times for a fraction of the expense.

One of the challenges of publishing content online is maintaining a certain level of visual consistency. Often times printed materials will contain characters that aren’t obvious how to display in a markup language such as HTML. For example, a copyright statement may have the “©” symbol in it, however there doesn’t seem to be a key for that on the keyboard. What about the registered trademark symbol, accent marks, or even something as trivial as “greater than” and “less than” symbols? Due to the nature of HTML, using some of these symbols can be confusing, but we are about the clear them up.

If you use a “What You See Is What You Get” (WYSIWYG) HTML editor such as Adobe GoLive or Macromedia Dreamweaver to create your web pages, using things like the “greater than” and “less than” symbols isn’t a problem. Simply type them as you normally would. However, what about the other special characters, and what about those people that code their HTML by hand. For them displaying these special characters can be a problem.

The solution to this problem is special character codes in HTML. These are special HTML codes that have been developed to represent the myriad of special characters available, such as the ones outlined above. In order to display some characters correctly, these codes must be placed into the HTML code rather than the actual symbol itself. This tutorial will provide a sampling of some of the more common of these codes, and how to use them in your HTML pages.

Instruction

Have you ever tried to create a text block in your HTML document that contains the “greater than” symbol? If you have, you probably realized real quick that it didn’t quite show up in a browser the way that you expected. The reason for this is that HTML uses those “<” symbols as a bracket to enclose tags. So in this case, the browser isn’t able to understand the context of the symbol, and simply mistakes it for a tag opening.

This same phenomenon is true for many other special characters that are commonly in use. In order to distinguish between characters that have significance in the code, and the ones that need to be displayed there are HTML character codes to ensure that your content appears the way you want it to. Here is a listing of a few common special characters:

The Copyright Symbol (©):
(&copy;) This symbol is used quite frequently, and represents a copyright announcement for the materials upon which it appears.

The Registered Trademark Symbol (®):
(&reg;) Another frequently used symbol to indicate that the materials it appears on is a registered trademark of the owner.

The Trademark Symbol (™):
(&trade;) Similar to the registered trademark is the trademark symbol, usually used when the owner of the material it appears on has filed an application for a registered trademark.

The Non-breaking Space:
(&nbsp;) A non-breaking space is really just a space. Since HTML only renders one space if there are gaps in the code, this is used when consecutive spaces need to be shown. Rather than needing one between every word in a document, the non-breaking space is reserved for adding extra space when needed.

The Ampersand (&):
(&amp;) Obviously this one is frequently used. To display an ampersand simple use the code above.

Less Than and Greater Than (< , >):
(&lt; or &gt;) These are another that are frequently used but a bit confusing. Along with the ampersand, these are the few characters that appear on your keyboard that require special codes.

French Accent Marks (é or è):
(&eacute; or &egrave;) Accent marks are common and confusing. Use these codes to ensure that your content is displayed correctly to your customers.

The Spanish Tilde (ñ):
(&ntilde;) Another confusing part of displaying your text can be solved with this special character, especially if you provide Spanish content.

The Cents Symbol (¢):
(&cent;) The dollar sign works, but the cents symbol requires a special code. Though probably not used as often, this one is a good one to be aware of.

Notice that each of the codes begins with an Ampersand (&) and end with a semi-colon (;), which explains why you need a special code to display an Ampersand.

If you are using a WYSIWYG (What You See Is What You Get) HTML editor, such as Macromedia Dreamweaver or Adobe GoLive, you will probably not need these codes as much, since you can use the normal keyboard shortcuts, and the editor will automatically insert the code. You can also access special characters through application menus, such as the following example in Dreamweaver:

  1. When you want to insert a special character, select Insert > HTML > Special Characters. From there are you presented with a few of the most common, or you can choose “Other” to view all the characters available.
  2. Simply select the character you would like to insert and the code is inserted for you.

If you are coding your HTML yourself, you will want to get familiar with using these codes. Essentially you just put the code in where you want the character to appear. Suppose that we want to display this sentence in a web browser:

<code>Daily &amp; Monthly Specials.
</code>

Assuming that this text will appear in a paragraph, the HTML code that is required to render this sentence would be:

<code>&lt;p&gt;Daily &amp;amp; Monthly Specials.&lt;/p&gt;
</code>

Notice that we simply replace the ampersand with our special character code, and we are good to go. However, it is important to realize that not all special characters will show up in all browsers. The website Internet.com provides the following links to learn more about browser compatibility and special characters:

PEC Staff
PEC Staff
Bio   •   RSS Feed


x