Practical Ecommerce

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:

Practical Ecommerce

Practical Ecommerce

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

  1. Legacy User April 8, 2007 Reply

    Where are the HTML codes?

    — *Carlos*

  2. Legacy User May 11, 2007 Reply

    Thanks for making this content available, I was needing to put a copyright symbol on a webpage I am creating and you helped me do so.

    — *Jack*

  3. Legacy User July 4, 2007 Reply

    Thanks for the help.

    — *Mr. Pearl*

  4. Legacy User December 2, 2007 Reply

    Very useful!! I was wondering though how to make a "degree" sign (as for 24 "o" C for example)?

    — *Jellito*

  5. Legacy User December 10, 2007 Reply

    Nice little resource. Thanks!

    — *MSam*

  6. Legacy User February 18, 2008 Reply

    Can special characters be inserted in select option or input tag?

    — *rajan*

  7. Legacy User March 12, 2008 Reply

    Awesome, thank you! this coding business is funny. (i'm on golive) finally figured out ö and family. wish i found you sooner! i DIG this, but i'm not a member!

    — *nomerama*

  8. Legacy User April 4, 2008 Reply

    Thanks your information was bery helpful

    — *paul*

  9. Legacy User April 25, 2008 Reply

    Can I use ^ character in HTML in any other way?

    — *Vimal*

  10. Paula April 5, 2014 Reply

    I’m trying to display “” in my
    web site. If I try that, it doesn’t display at all. (It makes my text italic.) If I encode it… it then displays < i >. I want to literally display
    .

    How?