5.5: Special Characters

Last updated
Save as PDF

Page ID: 93812

\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

The previous font settings can be paired with other style sheet properties to apply additional formatting to strings of text. The following table lists these properties that can bring more variety to text displays. Some of the properties pertain to styling the font itself, while others pertain to the structural arrangement of text within its container.

Display Character	Name	Code	Description
"	`"`	`"`	Quote
&	`&`	`&`	Ampersand
'		`'`	Apostrophe
<	`<`	`<`	Less than
>	`>`	`>`	Greater than
™	`™`	``	Trademark
	` `	` `	Non-breaking space
¢	`¢`	` `	Cents
¦	`¦`	`¦`	Broken vertical bar
§	`§`	`§`	Section
©	`©`	`©`	Copyright
«	`«`	`«`	Left angle quote
»	`»`	`»`	Right angle quote
¬	`¬`	`¬`	Not sign
®	`®`	`®`	Registered trademark
°	`°`	`°`	Degree
±	`±`	`±`	Plus/minus
¶	`¶`	`¶`	Paragraph
·	`·`	`·`	Middle dot
•	`•`	``	Bullet
¼	`¼`	`¼`	Fraction one-quarter
½	`½`	`½`	Fraction one-half
¾	`¾`	`¾`	Fraction three-quarters
÷	`÷`	`÷`	Division
×	`×`	`×`	Multiplication
ø	`ø`	`ø`	Small o-slash
Ø	`Ø`	`Ø`	Large O-slash
–		``	En dash
—		``	Em dash

Figure \(\PageIndex{1}\): Special character names and codes. ("MGA Web Development Tutorials" by Floyd, Kevin; Kwak, Myungjae; and Stines, Alan, Computer Science and Information Technology Ancillary Materials. 4, GALILEO Open Learning Materials is licensed under CC BY-SA 4.0)BY-SA 4.0)

As an example of using these special characters, the following code leaves five spaces between words by using non-breaking space ( ) and bullet (•) characters between them.

THERE&nbsp;&nbsp;&bull;&nbsp;&nbsp;ARE&nbsp;&nbsp;&bull;&nbsp;&nbsp;
FIVE&nbsp;&nbsp;&bull;&nbsp;&nbsp;SPACES&nbsp;&nbsp;&bull;&nbsp;&nbsp;
BETWEEN&nbsp;&nbsp;&bull;&nbsp;&nbsp;THESE&nbsp;&nbsp;&bull;&nbsp;&nbsp;
WORDS.

Figure \(\PageIndex{2}\): Using special characters for Web page display. ("MGA Web Development Tutorials" by Floyd, Kevin; Kwak, Myungjae; and Stines, Alan, Computer Science and Information Technology Ancillary Materials. 4, GALILEO Open Learning Materials is licensed under CC BY-SA 4.0)

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

Figure \(\PageIndex{3}\): Browser display of hard spaces and bullets. ("MGA Web Development Tutorials" by Floyd, Kevin; Kwak, Myungjae; and Stines, Alan, Computer Science and Information Technology Ancillary Materials. 4, GALILEO Open Learning Materials is licensed under CC BY-SA 4.0)

Displaying HTML

If you need to display HTML tags as part of the text on a Web page, you cannot type "<" and ">" symbols. These characters are interpreted by the browser as enclosing HTML tags and would be treated as such. Instead, you must use the special HTML characters "<" and ">" to display these symbols. Assume that you wish to display the following HTML 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>

Figure \(\PageIndex{4}\): Browser display of HTML code. ("MGA Web Development Tutorials" by Floyd, Kevin; Kwak, Myungjae; and Stines, Alan, Computer Science and Information Technology Ancillary Materials. 4, GALILEO Open Learning Materials is licensed under CC BY-SA 4.0)

The above output needs to be entered in the text editor using special characters in place of < and > symbols as shown below:

<pre style="font-size:0.9em">
&lt;p&gt;This is a paragraph in which the word <span class="red">&lt;span class="red"&gt;</span>
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;
</pre>

Figure \(\PageIndex{5}\): Code to display HTML tags in the browser. ("MGA Web Development Tutorials" by Floyd, Kevin; Kwak, Myungjae; and Stines, Alan, Computer Science and Information Technology Ancillary Materials. 4, GALILEO Open Learning Materials is licensed under CC BY-SA 4.0)

Styling Character Codes

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

    <style>
      .equation {font-family:courier new; font-size:1.8em; font-weight:bold}
    </style>

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

Figure \(\PageIndex{6}\): Applying styles to character codes. ("MGA Web Development Tutorials" by Floyd, Kevin; Kwak, Myungjae; and Stines, Alan, Computer Science and Information Technology Ancillary Materials. 4, GALILEO Open Learning Materials is licensed under CC BY-SA 4.0)

¼ + ½ = ¾

Figure \(\PageIndex{7}\): Character codes with styles applied. ("MGA Web Development Tutorials" by Floyd, Kevin; Kwak, Myungjae; and Stines, Alan, Computer Science and Information Technology Ancillary Materials. 4, GALILEO Open Learning Materials is licensed under CC BY-SA 4.0)