Code and Pre

Lets say you have a piece of XHTML markup code that you want to include in a tutorial about markup. The correct semantical element to use for code snippets is code. The piece of markup that you want to include in the tutorial text looks like this:


 <p>
   A paragraph with an
     <em>emphasized</em>
   word.
 </p>

Now, two problems arise.

If you just paste this example in as-is, the less than and greater than signs will be interpreted as markup by the XHTML parser/browser (Internet Explorer for example). This will result in the code snippet not showing as code in the display.

This is solved by escaping the less than and greater than signs using character entities as described above.
The whitespace (linebreaks, tabs, spaces etc) in the example will be truncated into a single space. This is the default behavior of parsers/browsers.

This is solved by using the pre element. The pre element means "preformatted" and indicates that the text of pre shall have its original whitespace characters preserved.

The actual code of the example snippet becomes:

<pre>
  <code>
    &lt;p&gt;
      A paragraph with an
        &lt;em&gt;emphasized&lt;/em&gt;
      word.
    &lt;/p&gt;
  </code>
</pre>