Home > Articles

  • Print
  • + Share This

How to Use Special Text Characters

HTML is a lot like life. There's always some character or another causing you problems. Although you might not have thought about it, HTML uses some characters for very specific purposes. The obvious examples are the less-than and greater-than symbols. By now you know that these symbols signify the beginning and end of an HTML tag. When a browser sees these characters, it thinks it's being told to do something. This task shows you what you need to do to include these characters in your HTML as normal characters instead of as tag identifiers.

Figure 2.7 HTMLinterprets many "special" characters as the preamble to an HTML command. Escape codes let you include the characters as characters.

What's the Secret Escape Code?

Although the less-than and greater-than symbols are the obvious examples of characters that require special treatment in HTML, there are many others. How do you add an accent over that e or an umlaut over that a? How about that copyright symbol, or the registered trademark? In fact, if you can't type it on your keyboard without holding down something other than the key itself or the key in combination with the Shift key, you can't use it in your HTML. Browser support will be iffy at best. As a solution, HTML provides escape codes for these special characters. This task presents a few of the common codes, but there are too many to cover them all here. Escape codes come in two flavors: named entities and numbered entities. For a list of special characters and their escape codes, see the inside back cover of this book or visit http://www.bbsinc.com/symbol.html.

  1. Include a Less-than Symbol

  2. To include a less-than symbol that shows up on your Web page, type <. To include a greater-than symbol, type >. For example, to indicate that 6 is less than 9 but greater than 3, type 6 < 9 and 6 > 3. What happens if you forget, and inadvertently use the less-than or greater-than symbol instead of the escape code? Your guess is as good as mine! Different browsers react differently, but the result won't be good.

    <body>
    <font size="2" face="arial, helvetica">
    To write the mathematical equation, five is
    less than 10, I use the escape character for
    the less-than symbol, like this:<br />
    5 < 10 <br />
    To write the equation 10 is greater than 5, 
    I write this code:<br />
    10 > 5<br />
    Escape codes allow me to use symbols 
    that are reserved for HTML.
    </font>
    </body>
  3. Add an Ampersand

  4. Step 1 shows how to solve the less-than and greater-than problems, but you might have noticed that we introduced another problem. Notice that the special character codes both begin with the ampersand and end with a semicolon. In fact, this is the case with all special characters. So, what if you want to show the ampersand on your Web page? You need to type the escape code for it. Type &.

    <body>
    <body>
    <font size="2" face="arial, helvetica">
    The ampersand symbol is another special 
    character that is reserved for use in HTML.
    Therefore, to use it on my Web page, I type
    the escape code for it. I'll use it in 
    this phrase:<br />
    Me & you & a dog named Boo.
    </font>
    </body>
  5. Add a Nonbreaking Space

  6. Remember that browsers ignore extra spaces in your HTML. You've learned how to use the preformatted text tag pair to get around this, but that can be cumbersome if you want just an extra space or two. In these cases, use the escape character for a nonbreaking space. To create an extra space in your HTML, type  .

    <body>
    <font size="2" face="arial, helvetica">
    Because browsers ignore extra spaces, I must
    use the escape code for a nonbreaking space
    if I want to add more than one space in a 
    row. Here I'll add five spaces:<br />
    Here come five spaces 
        in a row.
    </font>
    </body>
  7. Add Other Characters

  8. Here are a few other common escape codes: " for double quotation marks, © for the copyright symbol, ® for the registered trademark symbol, ¢ for the cent sign, ° for the degree sign, ¶ for the paragraph symbol, and ÷ for the division symbol.

    <body>
    <font size="2" face="arial, helvetica">
    Here are some common escape codes<br />
    " for double quotation marks<br />
    © for the copyright symbol<br />
    ® for registered trademark symbol<br />
    ¢ for the cent sign<br />
    ° for the degree sign<br />
    ¶ for the paragraph symbol<br />
    ÷ for the division symbol.
    </font>
    </body>
  • + Share This
  • 🔖 Save To Your Account

Related Resources

There are currently no related titles. Please check back later.