The <pre> tag stands for preformatted text and is usually displayed with a monotype font like Courier or Times. It is usually used to display code snippets for web or any programming language.

Its difference with the <code> tag is that it automatically creates line breaks according to the code you created, unlike the code tag which displays text one after the other (or inline).

For example, you created a code that looks like this:

This is the first line
This is the second line

Normally, browsers will display that code one after the other, with no line breaks. Like this:

This is the first line This is the second line

But with the <pre> tag, it automatically creates a new line for each line you create. So the code within your pre tag will look like this:

This is the first line
This is the second line

The XHTML

The above code is achieved by typing this:

<pre>
This is the first line
This is the second line
</pre>

Note that if you want to show HTML tags inside the <pre> tag, you’ll still have to edit the < and > tags into their character identities which are &lt; and &gt; respectively. The <pre> tag does not convert them.

The CSS

If you don’t fancy the default look of the <pre> tag, you can add some style to it using CSS, like so:

pre {
font: 10pt Arial, Verdana, Times;
background: #eee;
border:1px solid #000;
}

That’s it! =)

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.