Web Cash

If you want to be standards compliant, then using an <xmp> tag won’t work to display your sample HTML. Instead, you could display the code inside of a <textarea> tag.

The <textarea> tag is typically used in forms. You know, the box you type a bunch of text into.

A lesser known function of the <textarea> is to display some HTML without rendering it. When you create a <textarea>, you can put some “default” text into it. If this default text contains HTML, the browser will simply ignore everything until it sees a </textarea> tag.

Here’s a quick example:

<textarea>
<p>Here’s some sample HTML.</p>
<p>This stuff will show up inside of the textarea
  box and you will see <em>all</em> the tags.</p>
</textarea>

The output would be:
</p> <p>Here’s some sample HTML.</p> <p>This stuff will show up inside of the textarea<br /> box and you will see <em>all</em> the tags.</p> <p>

Simple. Effective. All you need to do is place your sample HTML between the <textarea> and the </textarea>.

There are a few problems with this, though.

Number one, you can’t display a <textarea> tag within your <textarea>. So that rules out creating examples of forms.

Number two, you can’t style the text at all. It’s bland. It’d be nice to make the text a bit larger and perhaps syntax highlight parts of it.

Using a <textarea> is a perfectly acceptable way to display sample HTML, and sometimes it may be the preferable way. However, there is another way.

You can escape the < and > characters, making the browser completely ignore all of the HTML.

Go back to the main guide: How to Display Sample HTML