`<pre> HTML Tag`

In HTML Tags

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Element of: Learn How Fonts And Web Typography Work In HTML: A Beginner's Guide
What does <pre> HTML Tag do?: The <pre> element is used to identify text that should be rendered with all line breaks and spaces intact. It is often used to preserve indenting and line breaks when displaying code blocks.
Display: inline
Usage: textual

Displaying Pre-Formatted Text

The <pre> element lets us display text exactly as it is typed, without compressing spaces or line breaks.

Code Example

We can use <pre> to display ASCII art, such as this flamingo (courtesy of ascii.co.uk):

            .-.
           ((`-)
            
             
      .="""=._))
     /  .,   .'
    /__(,_.-'
   `    /|
       /_|__
         | `))
         |
   jgs  -"==

Without the <pre> element, it would look like this:

.-.
((`-)


.="""=._))
/ ., .'
/__(,_.-'
` /|
/_|__
| `))
|
jgs -"==

Although ASCII art is great, <pre> is perhaps more useful for displaying code, scripts or tables.

Claire Broadley

Claire is seasoned technical writer, editor, and HTML enthusiast. She writes for HTML.com and runs a content agency, Red Robot Media.

Browser Support for pre


All	All	All	All	All	All