HTML <pre> tag

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 2 min read

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>

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>

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes