the <pre> tag

The <pre> tag is technically a block-level tag, but is also something of a cheat. Having said that browsers do not recognise line breaks and multiple spaces in your HTML code, here is the exception. Any code between <pre> tags has all breaks and line spaces honoured.

In these examples, the same code has been repeated twice. The first list is enclosed within <p> tags and the second one is enclosed in <pre> tags.

Marks: Dave Smith - 65% Carol Walker - 71% John Harper - 38% Pat Stephenson - 44% Zaeed Badawi - 55% Alexander McKenzie - 55% Alison Jackson - 49% Andy Burgess - 70%

Marks:
  Dave Smith - 65%           Carol Walker - 71%        John Harper - 38%
  Pat Stephenson - 44%       Zaeed Badawi - 55%        Alexander McKenzie - 55%
  Alison Jackson - 49%       Andy Burgess - 70%

View the source code of this page to see what I'm going on about. (Just as a reminder: in Internet Explorer or Netscape, right-click over some text then select "View Source" - in Opera, press Ctrl+F3.)

It's difficult to know what to say about the <pre> tag. Some web design books, including Niederst's Web Design in a Nutshell, discourage its use by warning that text within will always be displayed in a monospace font such as Courier New. And this in fact shows the only real advantage of the <pre> tag, which is that because in a monospace font all letters occupy the same width, simple tabulated text is therefore quite easy to produce. However it's a little ugly to look at (although it's usually the convention to represent computer code in this kind of font - as on this site).

However, Niederst is actually wrong, at least as far as IE is concerned. You can easily change the font back to a more attractive-looking one by nesting other tags inside the <pre> tag, such as <span> tags (see the page on inline tags). You can even have links included in pre-formatted text.

This may seem to make the points about browsers and text handling seem rather redundant. It is true that if you have preformatted text, you may have problems when you resize the browser window (try it, and have a look at the text above). But that seems the argument of a purist. I am sure some of you are now thinking that you can forget all this nonsense with tags and just format your whole page in <pre> tags.

Trust me though - <pre> tags are not the cop-out they seem to be. You will have big problems if and when your web pages are viewed on different screen resolutions or window sizes. All in all, <pre> tags, by ignoring the issues mentioned elsewhere in this lesson, just exacerbate the problems; they are crude and nasty. Purism it may be, but there are good reasons for it! They are best used if you want to produce simple tables with the minimum of fuss. Beyond that it's best to forget they're there.

Back to the top

Back to the menu for lesson 2