Web based School

Special Characters

Previous Next

There are certain text characters that cannot be displayed in the browser by typing them directly into your text editor. Some of these characters have special meaning in XHTML and, rather than displaying them, the browser interprets the characters as XHTML code. For example, the "<" (less than) and ">" (greater than) symbols are used to identify tags. So, you cannot directly type these characters as part of your Web page information since they would be interpreted as XHTML tags rather than being displayed as less-than and greater-than characters.

Other symbols, such as © () and ™ (trademark), do not have keyboard equivalents. Still, you need a way to represent them on the Web page. Further, browsers always collapse a series of space characters into a single space, no matter how many spaces you enter into your text editor. At times, though, you may wish to leave more than one space between text items.

XHTML provides a set of special characters that display their associated symbols in the browser. These characters are prefixed with an ampersand (&) and suffixed with a semicolor (;) to identify them as special characters. You can use either the numeric code or the character name (if any) to represent the symbols in an XHTML document.

Character Name Code Description

Special character names and codes.

As an example of using these special characters, the following code leaves five spaces between words coding non-breaking space (&nbsp;)and bullet (&bull;) characters between them.

THERE  •   ARE  •   FIVE  •   SPACES  •   BETWEEN  •   THESE  •   WORDS.

Browser display of hard spaces and bullets.

If you need to display XHTML tags as part of the text on a Web page you cannot type "<" and ">" symbols. These characters are interpreted by the browser as enclosing XHTML tags and would be treated as such. Instead, you must use the special XHTML characters &lt; and &gt; to display these symbols. Assume that you wish to display the following XHTML code on a Web page.

<p>This is a paragraph in which the word <span class="red">RED</span> is displayed in red by surrounding it with a <span> tag to which a style class is applied.</p>

Browser display of XHTML code.

The above code needs to be entered in the text editor using special characters in place of < and > symbols.

  p#Code {font-family:courier new; font-size:10pt}

<p id="Code">
&lt;p&gt;This is a paragraph in which the word &lt;span class="red"&gt;
RED&lt;/span&gt; is displayed in red by surrounding it with a &lt;span&gt;
tag to which a style class is applied.&lt;/p&gt;

You should note that these special character codes can have styles applied to them just as other alphanumeric characters. For example, the following equation is displayed in 24-point bold Courier New font.

  .equation {font-family:courier new; font-size:18pt; font-weight:bold}

<p class="equation">&frac14 + &frac12 = &frac34</p>

¼ + ½ = ¾

Previous Next