Using the HTML `
` Element for Displaying Preformatted Text: Preserving Whitespace and Line Breaks

Learn how to use the HTML `

` (preformatted) tag to display text exactly as it appears in your HTML source code, preserving whitespace and line breaks. This tutorial explains its functionality, typical rendering (monospace font), and how to customize its appearance using CSS.


  






Using the HTML `
` Element for Preformatted Text



Understanding Preformatted Text



The HTML `
` (preformatted) tag is used to display text exactly as it's written in the HTML source code. This is especially useful for displaying text where whitespace and line breaks are important, such as when showing code examples, poems, or other text-based content that requires preserving its original formatting. The text within a `
` tag is rendered using a monospace font (a fixed-width font), making it easier to read and understand.




Using the `
` Element



To display preformatted text, place the text within the opening and closing `
` tags.  For example:




    
Example: Basic Preformatted Text

    



<pre>This text will
appear exactly
as it is written
in the source code.</pre>


    

    





Browser Support for `
`



The `
` element is supported by all major modern web browsers.






  
    

      Browser
      Support
    

  
  
    

      Chrome
      Yes
    

    

      Edge
      Yes
    

    

      Firefox
      Yes
    

    

      Opera
      Yes
    

    

      Safari
      Yes
    

  







Styling `
` with CSS



You can customize the appearance of preformatted text using CSS.  For example, you might want to set a specific font, add padding, or control the width:




    
Example: Styling `
` with CSS

    



pre {
  font-family: monospace;
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
  overflow-x: auto; /* Add horizontal scrollbar if needed */
}


    

    




Most browsers render the `
` element using a monospace font by default.