Creating Websites: Code for Special Characters

Special characters
When marking up content, you’re bound to notice that there are certain characters that just don’t display
properly when you put them directly in your markup. Perhaps the most obvious of these would
be the less-than and greater-than symbols, also called left and right angle brackets (< and >). Instead
of treating these like angle brackets, the browser assumes these are the beginnings and ends of tags.
Because of the double duty these characters serve, if you actually wanted to use < or > in your content,
you would need to use special codes called entity references to refer to them. In computer speak, this
is called escaping the characters. Escaping characters in XHTML is achieved simply by replacing the
character you intended to type with a combination of other characters that represent it. In every case,
escape sequences such as these begin with an ampersand (&) and end with a semicolon (;).
The entity references for the less-than and greater-than symbols are &lt; and &gt;, respectively. This,
however, poses a new problem. How do you mark up an ampersand symbol? The answer is the same:
you escape it by using its entity reference. The entity reference for an ampersand is &amp;.
Table 4-2 lists a few of the most common characters and their corresponding entity references.
Table 4-2. A Listing of Useful HTML Character Entities
________________________________________
Character                                 Character Entity reference of HTML and XHTML
__________________________________________________________________________

<                                                                                     &lt;
>                                                                                     &gt;
“                                                                                      &ldquo;
”                                                                                      &rdquo;
‘                                                                                       &lsquo;
’                                                                                       &rsquo;
&                                                                                    &amp;
Nonbreaking space                                                &nbsp;
— (em dash)                                                               &mdash;
?                                                                                      &larr;
?                                                                                      &uarr;
?                                                                                      &rarr;
?                                                                                      &darr;
®                                                                                    &reg;
™                                                                                    &trade;
©                                                                                    &copy;

I’m sure that using the <div> tag

is more professional than “faking a layout” using tables.

First, you see we’ll need to replace the angle brackets with their entity references. Don’t forget to

mark up the XHTML tag as computer code, either:

I’m sure that using the <code>&lt;div&gt;</code> element

is more professional than “faking a layout” using tables.

Then there’s also the curly quotes around the words faking a layout. Let’s replace those:

I’m sure that using the <code>&lt;div&gt;</code> tag

is more professional than &ldquo;faking a layout&rdquo; using tables.

And lastly, the curly apostrophe in the word I’m:

I&rsquo;m sure that using the <code>&lt;div&gt;</code> tag

is more professional than &ldquo;faking a layout&rdquo; using tables.

When you view this in a browser, it will look like your original sentence (see Figure 4-15).

Figure 4-15. Replacing certain punctuation with HTML entities will allow you
to preserve the formatting of your sentences.


Using entity references is quite simple because you’re simply replacing one character with a short
sequence of others. They’re helpful in keeping your markup portable across browsers, and they keep
your content looking and acting properly. You can get a complete list of entity references at
http://www.webstandards.org/learn/reference/charts/entities/.