HTML <pre> Tag

The <pre> tag displays its content exactly as it was entered in the HTML document, including spaces and line-breaks. This tag is often used to display computer code. The name <pre> derives from ‘pre-formatted‘ text.

HTML Tag

Example

#

A <pre> element with SQL code.
The browser has not changed the formatting.

  SELECT SUM(O.TotalAmount) AS SUM, C.FirstName, C.LastName
    FROM [Order] O JOIN Customer C 
      ON O.CustomerId = C.Id
   GROUP BY C.FirstName, C.LastName
   ORDER BY SUM(O.TotalPrice) DESC
<pre>
  SELECT SUM(O.TotalAmount) AS SUM, C.FirstName, C.LastName
    FROM [Order] O JOIN Customer C 
      ON O.CustomerId = C.Id
   GROUP BY C.FirstName, C.LastName
   ORDER BY SUM(O.TotalPrice) DESC
</pre>
pre = pre-formatted

Note: Working with well-formatted SQL code is important because it greatly improves readability. The <pre> element is helpful by displaying code exactly as it was entered in HTML.


Using <pre>

The <pre> tag displays a block of pre-formatted text.

Pre-formatted means that text is displayed 'as is', without spaces, line breaks, tabs, or other formatting.

By default, the text is rendered in mono-spaced Courier font.

The <pre> element is useful for displaying script and source code. This site uses it extensively.

More Examples

A <pre> element that displays C# code with a custom background.
Notice how the indentation and formatting is exactly as specified in HTML.

  using System; 

  namespace App 
  { 
    class HelloWorld 
    { 
      static void Main(string[] args) 
      { 
         Console.WriteLine("Hello World!"); 
         Console.ReadKey(); 
      } 
    } 
  } 
<pre style="background:whitesmoke;">
  using System; 

  namespace App 
  { 
    class HelloWorld 
    { 
      static void Main(string[] args) 
      { 
         Console.WriteLine("Hello World!"); 
         Console.ReadKey(); 
      } 
    } 
  } 
</pre>

Attributes for <pre>

The <pre> element itself has no attributes, but it does accept global attributes.
The following are commonly used.

Attribute Value Description
id    identifier Defines a unique identifier for the pre element.
class    classnames Sets one or more CSS classes to be applied to the pre element.
style    CSS-styles Sets the style for the pre element.
data-*    value Defines additional data that can be used by JavaScript.
hidden    hidden Specifies whether the pre element is hidden.
title    text Sets a title that displays as a tooltip.

For additional global attributes see our global attributes list.


Obsolete Attributes

Do not use the attributes listed below.  They are no longer valid on the pre tag in HTML5.

Attribute Description Alternative
cols Sets the preferred character count for a line. CSS width
width Sets the width of the pre element. CSS width
wrap Suggests how text overflow should be handled. CSS whitespace

Code Tags

The <pre> tag is part of a group of tags that create coding (programming) related features on web pages. This group is referred to as the Code tag group. Together, these tags allow you to create code-friendly pages.

A list of code tags.

Element Description
<pre> Displays pre-formatted text in fixed-width font -- usually computer code
<code> An element that is used to display computer code
<samp> Displays sample output from a coumputer code
<output> Displays output results of a calculation
<var> Defines its content as a variable
<!--...--> Marks text as comments in the source code. Not visible to users

Browser support

Here is when <pre> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

Guides