Demystifying <pre> and <code>

I’ll admit that I was a little mystified by the <pre> and <code> tags. If you’re not sure which to use and when, here’s a quick guide:

<pre>

• is short for pre-formatted text.
• is displayed in a fixed-width font (such as Courier).
• preserves both spaces and line breaks.

You want to use <pre> when you need to display text exactly as you typed it. Keep in mind that all spaces, tabs, and carriage returns will be preserved- which is why it’s a popular format for publishing poetry. For example, this:

<pre>Hello, I am
pre-formatted
     text.</pre>

will show you:

Hello, I am
pre-formatted
     text.

<code>

According to the W3C, <code> “designates a fragment of computer code”. This is what to use to display code in HTML- it’s semantically correct.

Here’s an example of using both <pre> and <code> to display a block of code. This:

<pre><code>
code here
     and code here
          more code
  and more code
</code></pre>

will show your visitors this:

code here
     and code here
          more code
  and more code

Styling <pre> and <code>

Now that you know which to use and when, it’s easy to set styles for these tags with CSS. You can, for example, choose to add padding and/or margins with borders around all instances of your <code>, or changing the default fixed-width font for all <pre> elements to something else. When styling <pre>, you might want to add this white-space definition so that your text wraps according to the user’s browser width, like so:

pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}

Finally, if you’re going to be posting a lot of code snippets using tags, you’ll want to use these characters:

&lt; displays “less than” or <
&gt; displays “greater than”, or >

Do you use <pre> and <code> in your HTML?