HTML Character Sets

A Practical Example

Let’s say that you want to display a block of HTML in a web page and have the element tags show up on the page. You may try to do so by simply dropping <code> blocks around the block of HTML you want to display. However, what you will find is that even with the <code> tags surrounding the bit of HTML in question, it will still be processed as HTML and rendered by the browser. What we can do is replace all of the special characters with the appropriate character references to prevent the browser from processing the code.

<!--The <code> blocks don't prevent this HTML from being rendered-->
<code>
  <p>This is a list of items.</p>
  <ul>
    <li>List Item A</li>
    <li>List Item B</li>
    <li>List Item C</li>
  </ul>
</code>

<!--Replace special characters with character references-->
<code>
  <p>This is a list of items.<&sol;p>
  <ul>
    <li>List Item A<&sol;li>
    <li>List Item B<&sol;li>
    <li>List Item C<&sol;li>
  <&sol;ul>
</code>

Let’s see how that code renders in the browser.

This is a list of items.

List Item A
List Item B
List Item C

<p>This is a list of items.</p> <ul>