HTML <pre> Tag
The <pre> tag is used to insert preformatted text into an HTML document. The spaces and line breaks in the text are preserved. The <pre> tag is usually used to display code, or a text (for example, a poem), where the author himself sets the location of the lines relative to each other. Text in a <pre> element is shown in a fixed-width font.
The tag content is displayed in the browser in a monospace font.
Inline elements are typically placed inside the <pre> tag. While block-level elements are allowed in HTML5, they may introduce unexpected whitespace or indentation, so inline elements are generally preferred.
TIP
The <pre> tag can be used when showing text with uncommon formatting, or some kind of computer code.
Syntax
The <pre> tag comes in pairs. The content is written between the opening (<pre>) and closing (</pre>) tags.
Example of the HTML <pre> tag:
Example of the HTML <pre> Tag|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
</head>
<body>
<pre>Spaces
and line breaks
within this element
are shown as typed.
</pre>
</body>
</html>Result
TIP
To insert code in an HTML document, use the <code> tag, nested in the <pre> element. In that case, search bots, screen readers, will immediately understand that it is program code.
Example of the HTML <pre> tag with the <code> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre>
<code>
body {
color:orange;
}
</code>
</pre>
</body>
</html>Attributes
| Attribute | Value | Description |
|---|---|---|
| width | number | Deprecated. Use CSS max-width or overflow instead. |
The <pre> tag supports the Global Attributes and the Event Attributes.
How to style an HTML <pre> Tag
pre {
background-color: #f4f4f4;
padding: 10px;
overflow-x: auto;
}Practice
What features are characterized by the 'pre' tag in HTML?