HTML <Pre> Tag

Definition

The <pre> tag is used to define preformatted text and displays content with a fixed-width font with spaces and line breaks preserved.

Example

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
</pre>

Usage

• Both the opening and closing tags are required.
• The <pre> element may be used for:
  • Displaying fragments of code, formatted per its language’s convention. The <pre> tag should be used with a <code> element to represent code. See <code> for examples.
  • Displaying ASCII art. See the example later in this article.
  • Display a contemporary poem with any formatting that is intrinsic to the poem itself. For example:

    <pre>                maxling
    
    it is with a          heart
                  heavy
    
    that i admit loss of a feline
          so           loved
    
    a friend lost to the
          unknown
                                  (night)
    
    ~cdr 11dec07</pre>

    Try it Yourself

Attributes

The Pre element only supports the Global Attributes.

Best Practices

• When using the <pre> element to display ascii art, you should use the <figure> and <figcaption> elements, along with the ARIA role and aria-labelledby attributes to screen readers to announce the image properly. For example:

  <figure role="img" aria-labelledby="fox-caption">
  <pre>
              /^._
  ,___,--~~~~--' /'~
  `~--~\ )___,)/'
    (/\\_  (/\\_
  </pre>
  <figcaption id="fox-caption">
  This fox is illustrated using preformatted text characters and ascii art.
  </figcaption>
  </figure>

  Try it Yourself

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile