The Pre Tag in HTML5

<pre></pre>

The pre tag is used for adding preformatted text to a page. We like to call it the lazy programmers tag. It is useful when you are in a hurry and just want to dump a lot of text on a page without enclosing separate paragraphs in their tags.

It is also useful on forms where it negates the use of line breaks after each input device.

Attributes for the pre tag can be set using style sheets.

Warning! Text formatted using the pre tag does not wrap when the width of the browser window is reduced. See the fix below for making it responsive.

The pre tag is used to place preformatted text

on a page. If I wanted double spacing and didn't

want to go to the trouble of using style sheets I

could just use the pre tag and it would display 

like this.

I could write a poem

and not have to use

any line break tags.

Because it even preserves the whitespace between words it can be used to display simple tables. No table tags were used for the table shown below.

Product        ID #         Cost
---------       ------       -----
Television     154t        34.95
Radio          25r          9.95
Stereo         345s        15.99

You should be careful when using the pre tag for setting paragraphs on a page.

Text enclosed within its framework will not wrap.

The width of a line that is placed on a page in the code will be the width of that line when displayed by the browser. The fix below for making it responsive.

We used an inline style sheet 

to change the appearance of 

the text in this example.

Changing text family, size and style won't affect the display of the pre tag.

Changing alignment properties will affect the position of the text on the page.

Exercise

To see how the pre tag works copy the 2 blocks of code into an HTML Editor and Preview them.

Make the Pre Tag Responsive

Since the text presented using the pre tag appears like you type it on the page, some of the lines may be too long to display at narrow device display widths. We need to make these long lines wrap.

Here's the CSS to do just that:

pre {
  overflow-x: auto;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}