6

6The CSS box model

6.11

Special and reserved characters

If you wanted to use the less than sign “<” in normal text on a web page, let’s say you wanted the paragraph:

<p>5 < 10</p>

Then you would have some problems; when the browser sees the character “<” it is expecting a HTML tag (they all start with a < character).

If you did put the above on a web site, it would fail validation (see § 6.9.1), some less lenient browsers may not display it at all. We are breaking the rules.

There are several of these reserved characters in HTML, this is a list:

html reserved characters

The following have special meaning in HTML:

Less than

<

Replacement code:

&lt;

Greater than

>

Replacement code:

&gt;

Ampersand

&

Replacement code:

&amp;

Double quotation mark

"

Replacement code:

&quot;

Single quotation mark

'

Replacement code:

&apos;

Now, obviously we want to be able to put quotation marks and ampersands on a web page, they are perfectly normal punctuation marks that get used everywhere.

To get round this problem, we have to use special codes for these characters, if we want to use a less than sign (<) in our text, we have to replace it with &lt;.

This is called an escape sequence, sometimes a symbol code and in my case an &code.

Basically escape sequences are a group of characters that are translated by the browser into a different symbol.

Whenever the browser comes across the sequence of characters &lt;, it will display a straight forward less than sign (<).

So whenever you want to put any of the five characters above in a web page as text to be displayed, use the &code that is given as a substitute.

&codes always start with the ampersand character (&) and end with a semicolon (;).

There are actually a lot more &codes than the five above, they are used to display various common symbols that are not accessible via the keyboard. For example &dagger; displays the dagger symbol (†).

The following tables shows all the &codes (escape sequence) characters for HTML.

6.11.1

HTML Character codes

mathematical html code mathematical html code
× Multiplication sign &times; &#0215; Intersection &cap; &#8745;
÷ Division sign &divide; &#0247; Integral &int; &#8747;
Minus sign &minus; &#8722; Almost equal to &asymp; &#8776;
± Plus/minus sign &plusmn; &#0177; Not equal to &ne; &#8800;
Fraction slash &frasl; &#8260; Identical to &equiv; &#8801;
N-array product &prod; &#8719; < Less than &lt; &#0060;
N-array summation &sum; &#8721; > Greater than &gt; &#0062;
Square root &radic; &#8730; Less than or equal to &le; &#8804;
Infinity &infin; &#8734; Greater than or equal to &ge; &#8805;
html reserved html code html reserved html code
< Less than &lt; &#0060; " Quotation mark &quot; &#0034;
> Greater than &gt; &#0062; ' Single quote &apos; &#0039;
& Ampersand &amp; &#0038;
miscellaneous html code miscellaneous html code
Leftwards arrow &larr; &#8592; ¦ Broken vertical bar &brvbar; &#0166;
Upwards arrow &uarr; &#8593; ° Degree sign &deg; &#0176;
Rightwards arrow &rarr; &#8594; · Middle dot &middot; &#0183;
Downwards arrow &darr; &#8595; Bullet &bull; &#8226;
Left right arrow &harr; &#8596;
spacing html code currency html code
En space &ensp; &#8194; ¢ Cent sign &cent; &#0162;
Em space &emsp; &#8195; £ Pound sign &pound; &#0163;
  Non-breaking space &nbsp; &#0160; Euro sign &euro; &#0128;
numbers html code numbers html code
¹ Superscript one &sup1; &#0185; ½ Fraction one half &frac12; &#0189;
² Superscript two &sup2; &#0178; ¼ Fraction one quarter &frac14 &#0188;
³ Superscript three &sup3; &#0179; ¾ Fraction three quarters &frac34 &#0190;
punctuation html code punctuation html code
¡ Inverted exclamation mark &iexcl; &#0161; Horizontal ellipsis &hellip; &#8230;
¿ Inverted question mark &iquest; &#0191; Overline &oline; &#8254;
Left double quote &ldquo; &#8220; § Section sign &sect; &#0167;
Right double quote &rdquo; &#8221; Paragraph sign &para; &#0182;
Double low-9 quote &bdquo; &#8222; © Copyright sign &copy; &#0169;
Left single quote &lsquo; &#8216; ® Registered trademark sign &reg; &#0174;
Right single quote & rsquo; &#8217; Trademark sign &trade; &#8482;
Single low-9 quote &sbquo; &#8218; ¬ Not sign &not; &#0172;
Lozenge &loz; &#9674; µ Micro sign &micro; &#0181;
« Left double angle quote &laquo; &#0171; Per mille sign &permil; &#8240;
» Right double angle quote &raquo; &#0187; Prime (straight quote) &prime; &#8242;
Single left angle quote &lsaquo; &#8249; Double prime (straight quote) &Prime; &#8243;
Single right angle quote &rsaquo; &#8250; Dagger &dagger; &#8224;
En dash &ndash; &#8211; Double dagger &Dagger; &#8225;
Em dash &mdash; &#8212;
greek small letters html code greek capital letters html code
α Alpha &alpha &#0945; Α Alpha &Alpha &#0913;
β Beta &beta; &#0946; Β Beta &Beta; &#0914;
γ Gamma &gamma; &#0947; Γ Gamma &Gamma; &#0915;
δ Delta &delta; &#0948; Δ Delta &Delta; &#0916;
ε Epsilon &epsilon; &#0949; Ε Epsilon &Epsilon; &#0917;
ζ Zeta &zeta; &#0950; Ζ Zeta &Zeta; &#0918;
η Eta &eta; &#0951; Η Eta &Eta; &#0919;
θ Theta &theta; &#0952; Θ Theta &Theta; &#0920;
ι Iota &iota; &#0953; Ι Iota &Iota; &#0921;
κ Kappa &kappa; &#0954; Κ Kappa &Kappa; &#0922;
λ Lambda &lambda; &#0955; Λ Lambda &Lambda; &#0923;
μ Mu &mu; &#0956; Μ Mu &Mu; &#0924;
ν Nu &nu; &#0957; Ν Nu &Nu; &#0925;
ξ Xi &xi; &#0958; Ξ Xi &Xi; &#0926;
ο Omicron &omicron; &#0959; Ο Omicron &Omicron; &#0927;
π Pi &pi; &#0960; Π Pi &Pi; &#0928;
ρ Rho &rho; &#0961; Ρ Rho &Rho; &#0929;
ς Sigma 1 &sigmaf; &#0962; Σ Sigma &Sigma; &#0931;
σ Sigma 2 &sigma; &#0963;
τ Tau &tau; &#0964; Τ Tau &Tau; &#0932;
υ Upsilon &upsilon; &#0965; Υ Upsilon &Upsilon; &#0933;
φ Phi &phi; &#0966; Φ Phi &Phi; &#0934;
χ Chi &chi; &#0967; Χ Chi &Chi; &#0935;
ψ Psi &psi; &#0968; Ψ Psi &Psi; &#0936;
ω Omega &omega; &#0969; Ω Omega &Omega; &#0937;
Table 6.4   HTML character codes

The above table lists all the common &codes (there are a load more for accents and funny letters), a full list can be found here.

In HTML, any character can be entered by using its character code (given in the code columns of the above tables). HTML character codes are preceded by the ampersand and hash characters (&#) and finished with a semicolon (;).

The character codes for all characters are predefined and standard; they are based on the original ASCII character set and then expanded with the use of Unicode characters.

The character code for the letter “A” is 65 (decimal). To enter the letter “A” in HTML using character code, use the following:

&#65;

Character codes can also be entered using hexadecimal notation. I cover hexadecimals in (§ 5.7.1)

The hexadecimal for 65 is 41 and in HTML this would be:

&#x41;

To use hexadecimal character codes, the hex number is preceded by &#x.

6.11.2

CSS and JavaScript character codes

CSS and JavaScript do not support the &codes of HTML, they do however allow characters to be entered directly with their character code.

To enter a Unicode character directly with its number, simply precede the hexadecimal (it must be hexadecimal) code with a “\” character and enter the hexadecimal code as four digits (use leading zeros if necessary). The following would give the A character:

\0041



End flourish image