Preformatted text

Back in the earliest days of HTML, there were no tables. And as you've seen in Exercise One, web browsers ignore tabs, returns, and any added spaces in your code. So, what if you needed to make a page with a price list, or a calendar, or a chart of statistics? How could you align text in a readable way?

The only way it could be done then was with the PRE, or preformatted text, tag. Now that we have the ability to make HTML tables, the PRE tag isn't very useful anymore, but there are still times when it comes in handy.

Basically, any text surrounded by the PRE tags will appear in the browser exactly as you typed it in your text editor, including all spaces and returns. For example:

                        This
           is a test
                  of the emergency
                                TEXT
              Formatting
                    System.

If you didn't surround this with the <PRE> tags, it would appear on your page like this:

This is a test of the emergency TEXT Formatting System.

If you look at the source code to this page, you'll see that both sentences are typed exactly the same way -- it's just that one is surrounded by <PRE> tags and the other by <P> tags.

Here's an example of the code for the PRE tag:

<PRE>
                        This
           is a test
                  of the emergency
                                TEXT
              Formatting
                    System.</PRE>

This is not something you want to use all the time, because when you surround text with a PRE tag, the text will no longer expand and contract to fit the size of the window. People may have to scroll left and right to read your text, and most people find that annoying. Still, sometimes PRE can be a nice effect.

<<-------- p r e v // a i w e b // n e x t -------->>