Preformatted texts in HTML; what exactly does it refer to. Or better to say, how is it different from the customary HTML texts? Let me explain. Following are the two primary aspects of preformatted text that makes it stand out distinctively from the standard text:
(1) Texts enclosed within the <pre> tags appear in mono-spaced i.e. they look like type written texts, and
(2) Web browsers display preformatted texts in exactly the way you’ve typed it, including all spaces, tabs and carriage returns
Yes it is the <pre> tag that defines a preformatted text. And in this lesson we’ll discuss more about the <pre> attribute.
Welcome to Lesson 10 – Preformatted Texts
Preformatted texts are looked upon as the finest options when it comes to writing poems and poetries, exhibiting codes or something similar wherein you require the browser to show up the extraneous spaces, tabs and carriage returns as a part of the page layout. Contrarily, you must also be well aware of the hazards of preformatting: on each line you’ll be required to hit the RETURN key, which if not performed will make the chunks of text move out of the browser window. <PRE>... </PRE> tags are professed to be one of the excellent and handiest comprising the toolkit of HTML. This lesson on HTML preformatted text pledges to preach you ways to command your browser to show up the texts in a consciously created haphazard well-aligned manner (with spaces, tabs and carriage returns inserted here and there) and advocating the location of text elements in your web page wherein spaces and tabs are not redundant, but are equally important as the graphic and textual segments.
If you remember clearly, in one of our previous lessons, lesson 3 – Modifying an HTML document, we have seen that a web browser merrily discounts all blank spaces, extra lines and other superfluous spaces, tabs, and carriage returns. But there are occurrences, when these very "off the point" characters turn out to be an important factor, a factor upon which the layout of one whole page depends! This is exactly where the role of the <pre> tags – the preformatted texts – comes into play. It is the PRE tag that instructs a web browser to display the text exactly the way it is typed in the HTML document. Following is an example wherein we want to have a table of information with aligned columns:
Enclosed with the <PRE ...> tags, the text appears in a well-aligned table format. Take a close look at the example above and you’ll notice that all spaces and characters stand by the same width. The coded page may look a bit ugly, but as long as things are showing up pretty good and smartly aligned in the front end why bother about the “dirty” coded segment?! Write out the same thing without the <pre> </pre> tags and you’ll see something like this:
title location Adam Author LA Kate Editor California Scott Director Texas
Now compare the two, and tell me which one looks better!
Finally, it’s time that we turn to our working doc. Following are some of the easy-to-follow steps to apply the <pre> tags in your HTML document.
- Open the working HTML file in the text editor program.
- Enter the <pre> </pre> tags before and after the text segment which needs to be aligned.
- Finally, save the same, return to your web browser, reload the document and now you should be able to view the changes made to the index portion.
Original Authors: Rajat
Edit Update Authors: M.A.Harris
Updated On: 26/05/2009
