pre

Special characters like & codes and tags in < > still have meaning within the section, though not all possible formatting makes sense within a preformatted section.

Useful for displaying ASCII art.

See also: <TT>.

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:

• width (type: Number) - this deprecated attribute was used to specify the desired width in characters of the block of text to help the user agent determine a valid font size
• HTML Core Attributes
  • class (type: CDATA) - space separated list of classes
  • id (type: ID) - document-wide unique id
  • style (type: Style Sheet) - associated style information
  • title (type: Text) - advisory title/amplification; this information is usually displayed through tooltips
     
• HTML International Attributes (I18N)
  • dir (type: Custom) - specifies the direction of weak or neutral text; valid values include ltr (left to right) or rtl (right to left)
  • lang (type: Custom) - specifies the Language Code of the language used in the text
     
• HTML Event Attributes
  • onclick (type: Script) - a pointer button was clicked
  • ondblclick (type: Script) - a pointer button was double clicked
  • onkeydown (type: Script) - a key was pressed down
  • onkeypress (type: Script) - a key was pressed and released
  • onkeyup (type: Script) - a key was released
  • onmousedown (type: Script) - a pointer button was pressed down
  • onmousemove (type: Script) - a pointer was moved within
  • onmouseout (type: Script) - a pointer was moved away
  • onmouseover (type: Script) - a pointer was moved onto
  • onmouseup (type: Script) - a pointer button was released

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 text¹ because these are used for delimiting HTML tags. You should therefore type &gt; to output the greater than symbol, and &lt; 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 Implementations²

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

¹ You can use the greater than and less than symbols if you are placing allowable HTML tags inside of a pre block.

² Please feel free to send me information about how other browsers implement this tag.