The <pre> tag displays its content exactly as it was entered, including spaces and line-breaks.
The name <pre> derives from ‘pre-formatted‘ text.
This tag is often used to display computer code.
A <pre> element.
It displays the SQL code exactly how it was entered.
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.
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.
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>
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.
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 white-space |
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, they 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 |
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 |
