Three Ways to Display Sample HTML in a Web Browser

If you're looking to write about web design and HTML, you've no doubt run into this problem. How do you display sample mark-up that the user can see?

The problem is simple. You want to display the sample markup. The user's browser wants to render it as actual mark up. You need to come up with something to tell the browser - "Hey, this isn't supposed to be rendered!"

There are a few ways to do this.

First, you could use an xmp tag.

The xmp tag was developed for displaying "example" HTML. Once the browser sees an xmp tag, it stops rendering all HTML until it sees a closing tag.

However, the tag is deprecated. It's no longer included in the HTML standards - which will prevent your site from validating - and it may not be supported by all browsers. Use at your own risk.

A second, more reliable method, is to include the markup in a textarea box.

When you create a textarea element, you can include text in between the opening and closing tags as "default" text. Any HTML in this text remains unrendered - which allows you to easily display your sample markup.

There are two problems with this, though. First, you can't include a closing textarea tag within your example - or it will prematurely close the textarea that you are using to display your example. You also cannot style the text at all with css.

The third solution - probably the best - is to escape all of the < and > signs in the sample code.

If you replace < with [& lt;] (take out the space) the browser won't think that the tag is real html. It will simply display the markup.

This is by far the surest method of displaying your sample HTML, the only problem is that you need to escape all of the characters. However, you can take a shorcut - use this form to do the escaping for you.

Copy and paste your own code in, and the escaped code will be created on the spot.