The <pre> tag is used to display preformatted text in the user's browser. Preformatted, in this case, just means that you want the text to be displayed exactly as you typed it.
Here's how text shown using the <pre> tag is different from normal text such as that within paragraph (<p> ... </p>) tags:
w, take up more space than narrower letters, like
i. In <pre> text, which is displayed in a monospaced font, every character is the same width.
The <pre> is a block element. It is similar to some of the other block elements, like <p> and <h1>, in that you may not nest any other block elements within it. As with the other block elements, preformatted text may include inline elements like <em> and <a href=...>.
So, when would you use the <pre> tag? The short answer is, when you want to have things line up in a certain way. How about a few examples?
Let's say that you want to develop a web page showing how to use indenting to make your HTML code more readable. You're a Windows user, so you open up Notepad and create an HTML document containing some code, all beautifully indented and lined up perfectly. In Notepad, it looks like this:
<html>
<head>
</head>
<body>
<p>Here's a paragraph of text.</p>
<ul>
<li>Here's a list item</li>
<li>Here's another list item</li>
<li>Here's one more list item</li>
</ul>
</body>
</html>
(Okay, it actually looks nothing like this in Notepad. If you really included this HTML code as part of a larger page, the browser would attempt to interpret the HTML just like any other HTML. There is a way to instruct the browser to display HTML tags as text, without considering them part of the actual HTML code for the web page itself, but we won't get into that here.)
You save your page, bring it up in your browser, and you see this:
<html> <head> </head> <body> <p>Here's a paragraph of text.</p> <ul> <li>Here's a list item</li> <li>Here's another list item</li> <li>Here's one more list item</li> </ul> </body> </html>
Wait a minute! You typed each line of HTML on a separate line in Notepad. Why is it all coming up jammed together like that?
Remember that your browser ignores line breaks in your HTML, and only inserts them when you tell it to using HTML tags.
Thinking you've solved the problem, you insert a <br /> at the end of each line. Let's see how that turns out.
<html>
<head>
</head>
<body>
<p>Here's a paragraph of text.</p>
<ul>
<li>Here's a list item</li>
<li>Here's another list item</li>
<li>Here's one more list item</li>
</ul>
</body>
</html>
That's better, but not exactly what you were hoping for. While you're now able to see your line breaks where you want them, it's hardly useful for demonstrating indenting, is it?
What happened? Is something wrong with our browser? No, it did exactly what it's supposed to do: it collapsed all strings of more than once space into a single space, and eliminated the leading spaces from each line, so that all of our nicely indented code is now aligned to the left of the page.
Undaunted, you decide to enclose your text within <pre> ... </pre> tags, and voila!
<html>
<head>
</head>
<body>
<p>Here's a paragraph of text.</p>
<ul>
<li>Here's a list item</li>
<li>Here's another list item</li>
<li>Here's one more list item</li>
</ul>
</body>
</html>
Well, that's more like it!
Now, let's say you want to make a brief shopping list. There are better ways to do this using tables, but you haven't learned about those yet, and you need to get this page up today. You type your list into your text editor, carefully aligning the columns of information, and including a <br /> tag at the end of each line. Here's how it turns out:
Price Extended
Qty Description Each Price
--- ----------- ---- -----
3 Eggs .79 2.37
10 Swimsuits 13.00 130.00
1 Pencils 1.00 1.00
----------- -----
Total 133.37
While you can make out what it's supposed to look like, it's not very attractive, is it? Why did it look so good in Notepad, and so bad here?
Well, the collapsed spaces alone would be enough to mess up your column alignment. However, even if all of the spaces were left alone by the browser, you'd still have a problem, because every letter is a different width, making it nearly impossible to align the columns using spaces, anyway!
The reason it looked so good in Notepad is simple: Notepad displays text in a monospaced font, where every character (including the space character) is the same width.
Next, you try it using the <pre> tag.
Price Extended
Qty Description Each Price
--- ----------- ---- -----
3 Eggs .79 2.37
10 Swimsuits 13.00 130.00
1 Pencils 1.00 1.00
----------- -----
Total 133.37
Cool! That's exactly what you were looking for.
Now, just for fun, let's try one more example. You're taking a computer graphics
course at SRJC, and your instructor insists that, to fully understand the subject,
you must go all the way back to character-based systems. To appreciate the challenges
of making art using only the characters on your keyboard, she wants you to convert
the Santa Rosa Junior College logo to ASCII art
, then display it on a web page.
Here's what the SRJC logo looks like:
After long hours of painstaking work, you complete the conversion. (Or, like me, you use a free ASCII art conversion program on the web!) You place your work in an HTML document and fire up your browser, excited to view the results live on the web. This is what you see:
LLttttttttttttttttttttttttttttttttttttttttttttttttttttttttLL
tt tt
tt ..tt.. tt
tt ..KK##DD.. tt
tt ..GGKKttWWff.. tt
tt ;;WWKK.. ,,KKKK.. tt
tt iiKKff;; ;;LLDD;; tt
tt iiKKLL iitt;; ..DDDD;; tt
tt ttWWLL.. ttKKGGKK;; ..GGWWii tt
tt ttWWii ;;ttWWLLWWtt.. ttWWii tt
tt iiWWff ttKKWWLLWWDD;; LLKK;; tt
tt ..DDGG ;;ffKKLLGGtt.. ..KKDD tt
tt iiDD;;..iiii..LLWWKKLLKKWWttttiiii ttWW.. tt
tt ttGG..;;DDKKttiiLLWWLLWWffiiKKDDGG ;;KK.. tt
tt LLGG..,,WWDDKKjj;;EELLDD;;DDKKKKKK ;;KK;; tt
tt ttGG.. GGWWGGGGLLWWLLKKLLEEGGWWtt iiKK.. tt
tt ;;KKtt iiffKKDDDDLLGGffKKDDGGtt.. LLWW tt
tt GGKK iiLLDDiiiijjGGtt.. ..WWLL tt
tt ttWWtt ..iiiiii;;ii LLKK;; tt
tt ;;WWff.. iiKKGGKK.. ,,GGKK.. tt
tt ;;WWKK.. jjEELL.. ;;WWEE.. tt
tt ttWWff ffWW.. ..DDDD;; tt
tt ..KKLL,,..,, iiKKGG.. tt
tt ..DDWWii ttWWLL tt
tt ;;DDKKttWWff.. tt
tt GG##jj tt
tt ..,, tt
tt tt
tt tt
LLttttttttttttttttttttttttttttttttttttttttttttttttttttttttLL
You immediately realize that this, too, is a job for <pre>. After making the necessary changes to your HTML document, you refresh the page in your browser and, lo and behold, it's the SRJC logo!
LLttttttttttttttttttttttttttttttttttttttttttttttttttttttttLL
tt tt
tt ..tt.. tt
tt ..KK##DD.. tt
tt ..GGKKttWWff.. tt
tt ;;WWKK.. ,,KKKK.. tt
tt iiKKff;; ;;LLDD;; tt
tt iiKKLL iitt;; ..DDDD;; tt
tt ttWWLL.. ttKKGGKK;; ..GGWWii tt
tt ttWWii ;;ttWWLLWWtt.. ttWWii tt
tt iiWWff ttKKWWLLWWDD;; LLKK;; tt
tt ..DDGG ;;ffKKLLGGtt.. ..KKDD tt
tt iiDD;;..iiii..LLWWKKLLKKWWttttiiii ttWW.. tt
tt ttGG..;;DDKKttiiLLWWLLWWffiiKKDDGG ;;KK.. tt
tt LLGG..,,WWDDKKjj;;EELLDD;;DDKKKKKK ;;KK;; tt
tt ttGG.. GGWWGGGGLLWWLLKKLLEEGGWWtt iiKK.. tt
tt ;;KKtt iiffKKDDDDLLGGffKKDDGGtt.. LLWW tt
tt GGKK iiLLDDiiiijjGGtt.. ..WWLL tt
tt ttWWtt ..iiiiii;;ii LLKK;; tt
tt ;;WWff.. iiKKGGKK.. ,,GGKK.. tt
tt ;;WWKK.. jjEELL.. ;;WWEE.. tt
tt ttWWff ffWW.. ..DDDD;; tt
tt ..KKLL,,..,, iiKKGG.. tt
tt ..DDWWii ttWWLL tt
tt ;;DDKKttWWff.. tt
tt GG##jj tt
tt ..,, tt
tt tt
tt tt
LLttttttttttttttttttttttttttttttttttttttttttttttttttttttttLL
I hope you've enjoyed exploring the <pre> tag, and that you have gained a better understanding of its purpose and usage.