How to Display HTML on a Website Without the Browser Rendering It

So you've learned some HTML and you want to share that knowledge with the world. But that pesky browser keeps rendering all the markup you want to display for your users!

There are a few ways to get around this. You could put your markup into a textarea box. You can use an xmp tag. Or you could use '& gt;' instead of >.

Each method will work, but each one also has some disadvantages.

The Simplest Method - A Textarea

If you've ever built a form in HTML, you know what a textarea is. It's a big box that the user can type text into.

It has another nifty use, though. If you put any text in between the opening and closing tag, that text appears inside the textarea as the default text. When the text is shown, the browser ignores all mark-up... it simply prints the text verbatim.

To utilize this method, simply create a textarea in your page. Be sure to set its width and height characteristics - preferably in a stylesheet. Then, type the mark-up that you want to appear in between the opening and closing tags. Now your user can read the mark-up exactly as you intended.

The drawback is, of course, that the user can type in the textarea and mess it up. A novice user might not realize what the nifty little box is... and delete all of your precious code. This is a simple method, indeed, but you may want to use something a little more foolproof.

Create an Example Using XMP

The xmp tag is designed for just this purpose. As the name might imply, it is designed to help you create an example.

When the browser reaches the opening tag, it stops rendering all HTML until it gets to a closing tag. Any other HTML inside the tags is simply ignored. This allows you to include your example code and have it be displayed properly.

What's the catch? Not every browser supports xmp. It's a deprecated tag, no longer in the "standard" version of HTML. Some browsers support it, but others don't. If you try to use an xmp tag to display some HTML and a user with an unsupported browser comes to your site, he or she won't be able to see the code.

This isn't necessarily a problem. But it is generally a good idea to make your website as compatible as possible with every browser.

Get Rid of < and > Altogether!

The most effective method, albeit most time consuming, is to get rid of the greater than and less than signs altogether. These are the magic little devices that tell the browser to render HTML. Without them, your markup isn't really markup.

There are many special characters that you can create using the ampersand (&) and a special code. In our case, we want to use '& gt' to replace > and '& lt;' (remove the spaces) to replace The drawback, of course, is that you have to go back through and change the < and > signs on your sample code... but only on your sample code. This can be a bit tedious, but it's not altogether impossible.

One solution is to copy and paste your sample code into a new text document. Then, do a Search and Replace for each greater than and less than. Just be careful not to do this in your actual HTML document... or you'll screw up everything.

Choose the Simplest, Most Effective Method

There are three methods to choose from. It all boils down to - what method give syou the outcome you need, with the least trouble.

The simplest method is probably the textarea. It renders perfectly in every browser. Then again, you have to worry about users messing up the code before they can copy and paste it.

Another simple method is the xmp tag. Problem? Some browsers ignore it altogether. It will also prevent your page from validating. A possibility, but not if you want to be as compliant as possible.

That leaves the last method - replace every > and < in your code example with the special escaped character. Your code will render perfectly, your users can't mess it up. All you have to do is put in a little extra leg work.