HTML / HTML Tags

HTML <Pre> Tag

Oct 12, 2022
2 min read
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>

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