pre is an HTML tag that is used to specify preformatted text within an HTML document. Unlike the code or tt tags, it does not ignore newlines and carriage returns, so extraneous br (line break) tags can (and should) be left out of the formatting. The tag is good for including long segments of source code, creating rows and columns of data that line up properly, and for ascii art since it uses a fixed width font to display your text.
The pre tag is very useful when trying to display ASCII art in your writeups or any other HTML page.
See also: code, font, kbd, plaintext, samp, tt
Attributes
The pre tag does not have any required HTML attributes. Regardless of this fact, and the fact that attributes are rarely used with this tag, the following are all valid:
Usage
To use the pre tag, simply place opening and closing HTML tags around the preformatted text. For example:
<pre> | | T | I | C ---+---+--- T | A | C ---+---+--- T | O | E | | </pre>
On browsers that support this tag, this will typically cause the text above to be displayed in a monospace font. It should be noted that you cannot use the greater than ('>') or less than ('<') symbols in your text1 because these are used for delimiting HTML tags. You should therefore type > to output the greater than symbol, and < to output the less than symbol. A much easier solution is to simply copy and paste your code into the E2 Source Code Formatter which will format it correctly for web use.
It should be noted that while most other HTML tags can be used inside of a two pre tags, there are several that cannot (or rather should not as it would not be valid) due to the way the text is formatted. These invalid tags include: big, img, object, small, sub, and sup.
Everything2 Support?
E2 does provide limited support for the pre tag. It does not allow the use of any of its HTML attributes. Below is how your browser displays the tic tac toe board above here on Everything2:
| | T | I | C ---+---+--- T | A | C ---+---+--- T | O | E | |
For comparison, here is how it would look if you typed the same exact text with the same exact formatting but without using the pre tag:
| | T | I | C ---+---+--- T | A | C ---+---+--- T | O | E | |
Similar to the problem with '<' and '>' above, keep in mind that on E2, square brackets ('[' and ']') can also cause problems with your preformatted text. Again, use the code formatter to fix these problems. If you would like to use this tag with any of its attributes, you can do so in your Notelet Nodelet.
Common Browser Implementations2
Most web browsers support this tag, as it has been around since at least HTML 2. Most browsers will display the formatted text in a monospaced font such as Courier New.
Previous HTML Tag: plaintext (previous E2 supported HTML tag: p)
Next HTML Tag: q
See Also: HTML tags and HTML attributes
1 You can use the greater than and less than symbols if you are placing allowable HTML tags inside of a pre block.
2 Please feel free to send me information about how other browsers implement this tag.