Module 4 - Page 14

PRE

Tag: PRE
Description: Used to set pre-formatted text. Always closes.

The PRE tag always displays content using the browser-default monospace font (usually Courier 10pt), unless set to do otherwise in CSS. BR tags are not required for line breaks within the PRE tag; ordinary carriage returns are recognized as line breaks, making the BR tag unnecessary. The PRE tag also respects space characters, displaying all spaces individually, rather than compressing a group of spaces together and displaying them as a single space.

Example:

<pre>
Shoo, Shoo, Shoemaker
By Ogden Nash

    I often grieve for Uncle Hannibal
    Who inadvertently became a cannibal.
    He asked Aunt Mary to roast him the gobbler;
    She understood him to say, the cobbler.
</pre>

Displayed:

Shoo, Shoo, Shoemaker
By Ogden Nash

    I often grieve for Uncle Hannibal
    Who inadvertently became a cannibal.
    He asked Aunt Mary to roast him the gobbler;
    She understood him to say, the cobbler.

The PRE tag is also useful for displaying multiple-line code fragments, as it preserves spaces and carriage returns that would ordinarily be ignored.

Example:

<pre>
var goober = "Ouch";
function doStuff(myRadius, myUlna) {
    var myBones = myRadius + myUlna;
    alert(goober + myBones);
}
</pre>

Displayed:

var goober = "Ouch";
function doStuff(myRadius, myUlna) {
    var myBones = myRadius + myUlna;
    alert(goober + myBones);
}

The PRE tag can also be used to create space between elements on an HTML page; every carriage return placed between the <PRE></PRE> is displayed in the browser. This is an officially-supported alternative to the more common (but non-standards-compliant) practice of placing multiple BR tags on a page in order to create visible white space.

Example (non-standard/unofficial -- avoid this):

<p>Here is a paragraph of text.</p>
<br />
<br />
<br />
<p>Here is another paragraph of text.</p>

Displayed:

Here is a paragraph of text.

Here is another paragraph of text.

Example (supported/standards-compliant -- use this):

<p>Here is a paragraph of text.</p>
<pre>


</pre>
<p>Here is another paragraph of text.</p>

Displayed:

Here is a paragraph of text.

Here is another paragraph of text.

Although multiple BR tags as a means of space generation are currently supported by all of the major browser manufacturers, multiple BR tags are not an official component of the HTML specification. To create space between elements, the HTML4-compliant OFFICIAL route is to use CSS to redefine tag appearances to allow for additional spacing below or above an element in question. Until you learn CSS, the only OFFICIALLY supported way to create space on the page is via the PRE tag, as described above.

Having said this, I must, in all honesty, point out that multiple BR tags in combination provide a more consistent appearance, in terms of precise space, than the PRE tag, and that even Netscape 6 supports this usage.

If you learn CSS, the issue of space generation using BR or PRE will become moot; using CSS, you will create space using the margin property for the elements in question. However, until that time, you must use your best judgement as to whether you will support the official standards, or the unofficial ones.

Main Menu