|
HTML Tip:
Learn To Speak Latin
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
Ever visit a Web page that has an intuitive design, fast-loading graphics, and cool navigation - only to discover spelling and grammar errors that are downright bizarre? Often, those errors occur because well-meaning Web designers use special HTML characters inappropriately - or not at all.
Special Characters Increase Your Options
Glance down at your keyboard and notice the number of keys that do double-duty. Start with the number keys: the number 1 can also be an exclamation point while the number 5 key contains the percent sign. Other keys contain brackets, ampersands, asterisks, etc.
Some characters aren't on the keyboard at all. You'll have to include special characters in your code if you want to include a copyright symbol, certain math equations, and other non-standard characters on your Web page.
That means using a table of characters called the ISO-8859-1 Latin-1 Table. Use the Latin-1 characters on your Web page either by typing in a numeric character reference or an entity reference when you write your HTML code.
For instance, a standard double quotation mark is defined as either " using numeric characters or " using an entity reference. Either way, your visitors see a plain quotation mark.
Other handy special characters include:
- Registered trademark: ® or ®
- Copyright symbol: © or ©
- Ampersand: & or &
- At sign (as in an email address): @ only. There's no entity equivalent defined.
- Degree sign: ° or °
Special characters are particularly useful if you're designing pages to appeal to international audiences - particularly in Western Europe. Use them to display the correct punctuation marks and spelling of words in English, German, French, Portuguese, Spanish, and other Western European languages.
Displaying Code On Your Web Page
In many of our Webmaster Tips articles, we show you sample code you can use on your own Web page. You may have tried that on your own site, but discovered that none of your sample code actually displays on your Web page. Why? Because the browser interprets code in an HTML document as, well, real code.
Use special characters to comment out the sample code in your document if you want it to display as code.
Suppose you want to display this HTML code on your Web page:
<H1>Using Font Tags</H1>
You'll have to use special characters for the brackets. So the example code looks like this in your HTML code:
<H1>Using Font Tags</H1>
Avoid The "Smart Quotes" Trap
Microsoft's word processing, spreadsheets, and page layout software uses what Microsoft calls "smart quotes." Straight double quotation marks are automatically replaced with the fancier opening and closing curly quotation marks. Other non-standard characters are also supported, including:
- Long dashes
- Curly single quotes
- Trademark symbol
True Type fonts in Microsoft Windows systems use a superset of ISO Latin-1 to get these special characters. In basic Latin-1, the numeric characters 128-159 are left open, but Windows systems use them to create custom characters that usually are only visible on Windows operating systems - and even there, display isn't always consistent.
Many Microsoft software packages offer users a handy "save document as HTML" option. When you select that, any smart quote character contained in the document gets converted into HTML - but using the Latin-1 superset, not standard Latin-1 characters. Be extremely careful when you convert Word documents to HTML because of system incompatibility problems. Visitors with non-Windows systems may see apostrophes rendered as quotation marks and mysterious empty boxes or spaces where other characters should be.
People even get mystery characters with email when they compose a lengthy message in Word, then cut and paste it into their email package. Recipients using incompatible email systems are likely to see question marks or gibberish where the smart quotes characters should be. This problem can really make you look stupid.
Would you respond to the invitation contained in this email?
We?re the very best SEO firm in the business! You?ll love our attention to every detail of your site!
Solve this problem either by disabling the Auto Format function in Word or converting the smart quotes into ASCII by hand in your HTML code.
Catch Browser Display Problems
The browser display problem isn't just limited to smart quotes. Some Macintosh systems have problems with characters in the basic Latin-1 set, including the broken vertical bar, superscripts, and fractions.
Some HTML editors will alert you when you've used inappropriate characters on your page. More unlucky webmasters will only find it out when a visitor emails them some version of the "why should I buy from you if you're so stupid that you can't spell?" response.
The really tricky part of the special characters problem is that the errors don't display consistently across operating systems or even across browser versions! Unless you view the document in a certain browser or operating system, you'll never realize that you have a problem.
That's why you need to test, test, and test again on every browser and system you can get your hands on. Too time-consuming and expensive? Use NetMechanic's Browser Photo tool to view actual screen shots of your page in 16 different browser and operating system combinations. Browser Photo will show you those mystery characters in all their glory.
It's an easy mistake to fix - but only if you realize you have a problem!
|
