Learning HTML 3.2 by Examples, section 5 Descriptions of HTML 3.2 tags:

PRE - preformatted text

Purpose

To include text to be displayed as such with respect to the use of blanks and newlines. This can be useful when there is information available in text-only form and we wish to put it onto Web, preferring immediate availability to nice layout. The text might also be e.g. computer output to be presented as it stands.

Typical rendering

The text is rendered in monospaced font, i.e. using a teletype-like font where all characters occupy the same amount of space horizontally. Use of blanks and newlines exactly corresponds to that of the HTML source within the PRE element.

Basic syntax

<PRE>
preformatted text
</PRE>

Possible attributes

attribute name possible values meaning notes
WIDTH integer width of text in characters not supported in general, and deprecated in HTML 4.0

The value of WIDTH should be equal to or greater than the length of the longest line. In principle, the WIDTH attribute is meant for providing a browser information which it can use to select a suitably-sized font or to adjust indentation to make the text fit. Unfortunately this is not usually done by browsers. You should not expect that e.g. text wider than 80 characters gets displayed correctly (even if you use the WIDTH attribute).

Allowed context

Block container.

Contents

Text element, with the exclusion of images (IMG) and changes in font size (BIG, SMALL, SUB, SUP, FONT) or any element that contains them.

Examples

The simplest example:

Example PRE-1.html:

<PRE>
To be or not to be,
that is the question.
</PRE>
A more realistic example:

Example PRE-2.html:

The printable characters of ASCII:
<PRE>
  ! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ 
</PRE>
An attempt to present line printer like computer output:

Example PRE-3.html:

The printout from the program is the following. Each line contains ten
real numbers, each in a field of ten characters. Notice that when viewing
this document on WWW, the rendering of the printout can be unsatisfactory;
in such a case widen the WWW window, if possible.
<PRE WIDTH=100>
 0.5138707 0.1757256 0.3086337 0.5345317 0.9476302 0.1717277 0.7022309 0.2264168 0.4947661 0.1246986
 0.0838954 0.3896298 0.2772301 0.3680532 0.9834590 0.5353862 0.7656789 0.6464736 0.7671438 0.7802362
 0.8229621 0.1519211 0.6254769 0.3146764 0.3469039 0.9172033 0.5197607 0.4011658 0.6067690 0.7854244
</PRE>
In situations like this, you may consider the effect of using BASEFONT before PRE. (This is not a good solution but it might serve as a workaround until browsers begin to support the WIDTH attribute.)

An example of PRE element containing links (this might also be presented using a table):

Example PRE-4.html:

Contact information (phone and E-mail):
<PRE>
help desk     4344 <A HREF="mailto:atk-neuvonta@hut.fi">atk-neuvonta@hut.fi</A>
operators     4341 <A HREF="mailto:opr@hut.fi">opr@hut.fi</A>
WWW problems  4331 <A HREF="mailto:webmaster@hut.fi">webmaster@hut.fi</A>
</PRE>

The discussion of presenting interaction with computer contains an additional example with embedded text markup.

Notes

As an alternative to using PRE, consider using a normal paragraph so that every line is terminated with a BR element. This has the disadvantages of not preventing a browser from dividing lines (but if a browser splits lines, they are probably so long that a PRE element might cause problems too) and not preserving leading spaces or multiple spaces within a line. On the other hand it has the advantage of more flexibility, e.g. allowing the use of proportional fonts.

As another alternative, often suitable for large pieces of text or data, consider writing a separate text file to which you have a link in your HTML code.

Previous versions of HTML contained the XMP, LISTING, and PLAINTEXT elements. They are now obsolete, and PRE should be used instead.

One typical use for PRE has been to present tables, and this may still be a good idea in some cases (see example 2). However, HTML tables element can be used for much more advanced tabular presentation. (You might still consider the possibility of presenting your tables in two alternative forms, using TABLE as the basic form but providing a PRE form for those readers who use a non-table browser.)

Although A elements and phrase markup (e.g. STRONG) can be used, the capabilities of a browser in presenting them may be more restricted than outside PRE elements.

You can even use tabs in the preformatted text, although it is better to use multiple spaces, since you cannot be sure of how tab stops are set in the reader's environment. The language specification says that the tab character should position to the next 8 character boundary but discourages its use.

Although a browser must show the document so that line breaks correspond to those in the source code, a browser is not forbidden from using e.g. constant left indentation for preformatted paragraphs.

You cannot change font size within a PRE element (and you cannot put a PRE element inside a FONT element, for example), but the BASEFONT element affects preformatted text, too.

In principle, a P tag is not allowed within a PRE element, since P is block element, not text element. However, HTML 2.0 specification encourages browsers to accept it, with the remark a P within a PRE element should produce only one line break, not a line break plus a blank line.

If character < or > or & occurs in the data, it must be expressed using the escape syntax (as in example 2). In particular you must do so when including HTML code into your document for the purpose of displaying the source code.

The SGML standard requires that the parser remove a newline immediately following the start tag or immediately preceding the end tag. Thus it should not matter whether you have the <PRE> tag on a separate line or as a prefix to the first line of the text. However, some browsers fail in obeying this, so you may consider using the latter presentation to prevent an extra line.



Date of last update: 2010-12-16.
This page belongs to the free information site IT and communication, section Web authoring and surfing, by Jukka "Yucca" Korpela.