Special Characters & Character Entities

A Problem: The < Character
As we have seen, by placing tags in an HTML document, we tell the browser to do something special with the content in the document. The browser knows that a piece of text is a tag because it starts with a < character. So, what happens if we want to use the < character as part of the content of our page? For example, we may want the browser to show this:
<< Go back
We cannot simply write this code:
<p>
<< Go back
</p>

The browser would get confused by the line << Go back and would expect the two < symbols to be opening a two new tags. This is because < is a special character in HTML. That is, it means something special to the browser and is not treated like other text characters. We need to use a specific code, called a character entity, to represent the < character. That code is &lt; where the lt stands for “less than”, the name of the character. So, the way we would write the code for the example above is this:
<p>
&lt;&lt; Go back
</p>

Another Problem: The & Character
Here we stumble across another problem. We have just used the & character not to display an “&” but to tell the browser some information. This means that & is also aspecial character. As such, whenever we want to display an “&” in the content of our page, we need to use the character entity for the & character. This character entity is &amp; which stands for “ampersand”, the name of the character. For example, if we want to display this in the browser: The character entity for the < character is &lt;

We would write the following code:
<p>
The character entity for the &lt; character is&amp;lt;
</p>

The > Character
While it is not essential to encode the > (greater than) character, it is recommended that you do. Because the < (less than) character must be encoded, it will make your code easier to read if you also encode the > character. The character entity to use is &gt; (which stands for “greater than”) as in the following example:

<p>
An opening body tag looks is written &lt;body&gt;
</p>

Which will display in the browser:
An opening body tag is written <body>

Special Characters And Their Character Entities
< less than &lt;
> greater than &gt;
& ampersand &amp;
” quot &quot;