HTML <pre> Tag for Preformatted Text


ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.

If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

PDF mobile

The <pre> Tag in HTML 5

Use the <pre> tag for preformatted text

The <pre> tag is used for preformatted text. Spaces and line breaks within the source document are preserved. In most cases, monospaced fonts should be used for the text style.

Example of using the <pre> tag to display keyboard input and sample output:

select 1024 * 1024 * 1024 * 1024 as " 1 Terabyte";
 1 Terabyte

This is an actual working example of the <pre> tag example code below.

<pre> Tag Syntax

Rules for coding HTML pre elements
   ... flow content expected ...
   <pre>... phrasing content ...
   ... phrasing content ...</pre>

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

  1. Include a pre element where flow content is expected.
  2. Begin the pre element with a starting <pre> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
  3. Include any HTML global attributes on the <pre> tag as appropriate.
  4. End the pre element with a matching </pre> closing tag.
  5. Inside the pre element, between the <pre> starting tag and the </pre> ending tag, code the inner HTML phrasing content with the preformatted content, taking care to include new lines and other whitespace only where it is to be displayed in the rendered document. As needed, code any phrase elements such as code element(s) for computer code or samp element(s) for computer output, or other tags that can be used in phrasing content.
Content of the pre element

The content of the b element can include HTML comments, text content and any tags that can be used in phrasing content.

<pre> Tag Attributes

Attributes of the <pre> tag
global attributes The only attributes that can be coded on the <pre> tag are the common HTML attributes.

<pre> Tag Examples

Examples of the pre tag in HTML 5
Example of using the <pre> tag to display keyboard input and sample output
(see <pre> tag demo above)
<p>Example of using the &lt;pre&gt; tag to display keyboard input and sample output:</p>
<pre><kbd>select 1024 * 1024 * 1024 * 1024 as " 1 Terabyte";</kbd><samp>
 1 Terabyte

Changes in HTML 5 - <pre> Tag

What's new in HTML 5
Differences between HTML 5 and earlier versions of HTML

The following attributes should not be coded on the <pre> tag because they either have been deprecated or were never officially supported:

  • width

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the pre element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5