Web Writers Learn Your Medium: HTML For Dummies Special and Foreign Characters

In the last installment HTML For Dummies Will Save Your Life, I hope I made the point that web writers should embrace the basic tools of the trade. Depending on word processing software on on-line widget editors is like driving your car without knowing how to fill the fuel tank. Like a good driver, who knows how to fill up, check their oil, adjust their tire pressure, and pre-set their radio stations, a good web writer needs to know the basic HTML tools to create web-ready documents which work on nearly 100% of web writing sites.

This installment covers how create special characters. There are two situations where special characters come into play. One, you want to create foreign (non-English) characters. Two, you need to use a character which already means something else in HTML.

Both of these situations are addressed with HTML escape characters. They’re called “escape characters” because the symbols you use escape or negate their common HTML meaning. The basic format of a HTML escape character is the ampersand symbol, followed by a code, and closed with a semicolon. For example, &lt; will display as <. &ntilde; shows up as ñ. Some characters us a pound-number combination while other have equivalent word-ish codes like “ntilde.” You could use either the number or the word to create the special character. They mean the same in HTML, but you may have to test the #NN codes to see how they render in specific environments.

Foreign Characters
HTML supports more than just the characters on your keyboard. You can use non-English alphabets by simply typing the HTML character code for the letter. Here is a fairly exhaustive list of the codes for your reference. So how do you use them? Simply type the character code where you would want the letter to appear. Human eyes will find it hard to read, but browsers have no problem translating it. Here are some examples:

You need to use a Greek word. If you need to display the Greek word for “word” (re: John 1:1, “In the beginning was the Word…), the English transliteration is “logos,” but you can display the native Greek by typing “&lambda;&omicron;&gamma;&omicron;&sigmaf;” which displays as “λογος.” Notice the & at the beginning and semicolon at the end of each Greek letter. That is what tells the browser these are special characters.

You want to use correct Spanish and French characters. The Spanish en-yay is probably the most common application of non-English characters. It is an “n” with a tilde over it so in less-than-imaginative HTML the code for it is &ntilde; which displays as ñ. If you need fancy French graves or a German umlaut, you can type things like &eacute;=é and &uuml;=ü. Another common Spanish symbol is the inverted question mark. The code &iquest; renders ¿ in the browser.

You need a scientific or monetary symbol. Ever need to put a degree sign on your numbers? It’s simple with &deg; which display as °. So now you can do things like, “It was -3 C° today” the code for which was “It was -3 C&deg; today.”

Ever wanted to use the cent sign, but noticed there isn’t one on your keyboard? Just type “&cent;” or “&#162” and you’ll be the envy of your friends because you can display ¢ and they can’t. Now you can type “That’s my 2¢ worth” and your forum posts will read, “That’s my 2¢ worth.”

If you want to write about British pounds or the Euro, use the code &pound; and &euro; to get £ and €.

You can even combine tags and symbols to create things like the dagger (cross) footnote symbol. The SUP tag tells the browser to put the enclosed characters in superscript and &dagger; displays the dagger. Type “<sup>&dagger;</sup>” to get as in “…the end of my sentence<sup>&dagger;</sup>” and later “<sup>&dagger;</sup>Here is the footnote…”. All of that displays as “…the end of my sentence” and later “Here is the footnote…”.

Special HTML Characters
Sometimes you need to use a character in a normal way which HTML treats as special. The less-than (<) and greater-than (>) symbols are the two most common you will need. If you read part one of this series, you remember that < and > tell the browser that what is between the symbols is a HTML tag. Often just typing < hoses up what follows because the browser is trying to interpret everything that follows as a HTML tag. Anytime you want the symbol to display and not be interpreted, just type the escape characters. For less-than, type &lt; and you get <. For greater-than, type &gt; and you get >.

The ampersand symbol starts the escape sequence so sometimes you need to type the code for the symbol instead of the symbol itself. &amp; is the code that yields &. You say it is silly to type &amp; just to get & but without it, I couldn’t have typed any of these examples. If I had just typed & your browser would have thought the characters that followed were codes.

Why you need to know and use this information
I know some of this seems like going around the barn to get to the door, but these symbols, some in combination with a few tags, will broaden your ability to write for the web. Since your submissions are going to eventually become part of a bigger page, using escaped symbols will prevent accidental mishaps.

The most common problem is the < symbol. Remember that writing sites are going to add all sorts of complex HTML code around your article so the finished page displays the site banner, ads, your article, footers, your byline, links to other articles, etc. If you’ve typed a bare < character, once inside this broader context, the character may fool the browser into thinking a tag follows. Under these conditions, it is not uncommon for everything following your bare < to disappear from the page. If you had typed &lt; the symbol would display and the browser would keeping rendering the rest of the text as if nothing happened.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: