Manage Subscriptions · Subscribe Now · F.A.Q.'s
HOME · Saturday, May 17, 2008
Training & Education
Displaying Special Characters Using HTML
Tutorial
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 (©):
HTML code: ©
This symbol is used quite frequently, and represents a copyright announcement for the materials upon which it appears.
The Registered Trademark Symbol (®):
HTML code: ®
Another frequently used symbol to indicate that the materials it appears on is a registered trademark of the owner.
The Trademark Symbol (™):
HTML code: ™
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:
HTML code:
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 (&):
HTML code: &
Obviously this one is frequently used. To display an ampersand simple use the code above.
Less Than and Greater Than (< , >):
HTML code:< or >
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 (é ):
HTML code: é or è
Accent marks are common and confusing. Use these codes to ensure that your content is displayed correctly to your customers.
The Spanish Tilde (ñ):
HTML code: ñ
Another confusing part of displaying your text can be solved with this special character, especially if you provide Spanish content.
The Cents Symbol (¢):
HTML code: ¢
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:
- 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.
- 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:
Daily & Monthly Specials.
Assuming that this text will appear in a paragraph, the HTML code that is required to render this sentence would be:
Daily & Monthly Specials.
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:
Special Characters Not Suitable for Netscape 4
wdvl.internet.com/Authoring/HTML/Entities/not_suitable.html
Special Characters that may not work on a Mac
wdvl.internet.com/Authoring/HTML/Entities/mac.html
Special Characters only suitable for fully HTML 4-compliant browsers
wdvl.internet.com/Authoring/HTML/Entities/mac.html#html4
Special Characters that may not work in any browser
wdvl.internet.com/Authoring/HTML/Entities/mac.html#don’
Blinklist | Del.icio.us | Furl | Ma.gnolia | Newsvine | Spurl | Reddit | Technorati
Published on Tuesday, November 01, 2005
Comments:
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.
Posted by: Jack
Friday, May 11, 2007
Thanks for the help.
Posted by: Mr. Pearl
Wednesday, July 04, 2007
Very useful!! I was wondering though how to make a "degree" sign (as for 24 "o" C for example)?
Posted by: Jellito
Sunday, December 02, 2007
Nice little resource. Thanks!
Posted by: MSam
Monday, December 10, 2007
Can special characters be inserted in select option or input tag?
Posted by: rajan
Monday, February 18, 2008
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!
Posted by: nomerama
Wednesday, March 12, 2008
Thanks your information was bery helpful
Posted by: paul
Friday, April 04, 2008
Can I use ^ character in HTML in any other way?
Posted by: Vimal
Friday, April 25, 2008
Ecommerce Articles
- Browse All Articles
- Browse our complete archive of ecommerce articles.
- Accounting, Management & Legal
- Ecommerce articles related to managing a small business including ecommerce accounting, business strategy and legal considerations.
- Conversion & Usability
- Online business articles about converting web site visitors into customers and how to gauge and improve your business website's usability.
- Development & Programming
- Articles to help designers, developers and programmers create successful, search engine friendly ecommerce websites and improve existing ones.
- Hosting, Infrastructure & Software
- Articles for ecommerce businesses about ecommerce web hosting, business infrastructure, business strategy and helpful ecommerce & small business software.
- Interviews & Profiles
- Interviews with prominent ecommerce business personalities and profiles of successful online businesses.
- Inventory & Shipping
- Ecommerce articles about inventory management, ecommerce order fulfillment and product shipping considerations.
- Marketing & Revenue Growth
- Articles relating to online marketing, email marketing and using the Internet to growing your business.
- Search Engine Optimization
- Search engine optimization articles for ecommerce business owners, strategists, marketers and developers.
- Shopping Carts & Online Payments
- Articles covering ecommerce shopping cart platforms and options for choosing an online payment gateway.
- Training & Education
- Tutorials and articles providing training and education for ecommerce business owners and developers of ecommerce websites.
Search Articles
Ecommerce Community
- Ecommerce Blogs
- Read our blogs about ecommerce topics written by industry professionals.
- Community Forum
- Connect with other ecommerce professionals to trade advice and answers in our community forum.
- Podcasts
- Check out our ecommerce podcasts covering topics ranging from interviews to tutorials.
- RSS Content Feeds
- Subscribe to our RSS feeds and have fresh ecommerce content delivered to you.
Ecommerce Resources
- Free Email Newsletter
- Sign up for Ecommerce Notes, our free email newsletter for ecommerce business owners and developers.
- Ecommerce Directory
- Browse our directory of ecommerce products and services, or submit your own listing in our directory.
- Ecommerce Glossary
- Familiarize yourself with terminology or submit terms to help others with our Ecommerce Glossary.
- Events Calendar
- Find out about upcoming ecommerce events or invite other ecommerce professionals by posting your own event.
- Press Releases
- Browse ecommerce related press releases and post your own press release for distribution.
- Ecommerce Store & Back Issues
- Pick up back issues of Practical eCommerce magazine along with other merchandise from Practical Ecommerce
About Practical eCommerce
- Frequently Asked Questions
- Look at frequently asked questions regarded using our website, subscribing to our magazine and more.
- Advertising Information
- Information about advertising in Practical eCommerce magazine, on our website, or in our email newsletters.
- Editorial Sharing
- Learn about options for sharing our content with your visitors, customers or employees.
- About Us
- Learn more about Practical Ecommerce magazine and meet our staff.
- Contact Us
- Contact Practical Ecommerce at any time for more information. We'd love to hear from you.
Copyright 2007 Confluence Distribution, Inc. and Practical eCommerce.
All Rights Reserved.
Where are the HTML codes?
Posted by: Carlos
Sunday, April 08, 2007