The <pre> tag in HTML defines preformatted text — meaning the text inside it is displayed exactly as written in the HTML file, including spaces, tabs, and line breaks.
It is often used to display code snippets, poems, or any text where spacing and alignment matter.
Syntax
<pre>Preformatted text goes here</pre>Attributes
| Attribute | Description |
|---|---|
class | Assigns one or more class names for styling. |
id | Assigns a unique identifier to the preformatted block. |
style | Adds inline CSS styles to customize appearance. |
title | Provides additional information as a tooltip. |
Example
<!DOCTYPE html>
<html>
<head>
<title>PRE Tag Example</title>
<style>
.code-sample {
background-color: #f4f4f4;
border: 1px solid #ccc;
padding: 10px;
font-family: "Courier New", monospace;
color: #333;
border-radius: 6px;
}
</style>
</head>
<body>
<h1>Preformatted Text Example</h1>
<p>The <pre> tag preserves spacing and line breaks exactly as they appear in the source code.</p>
<pre class="code-sample" id="example1" title="Sample Code">
function greetUser() {
console.log("Hello, World!");
}
</pre>
<p>Notice how indentation and line breaks are preserved inside the <pre> tag.</p>
</body>
</html>Output
Browser Output
Use our TryIt Editor to see the output.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
The <pre> tag displays text in a fixed-width font, maintaining spaces and line breaks exactly as written.
This makes it ideal for displaying source code or formatted text blocks.
Notes
- The
<pre>tag maintains white spaces, line breaks, and indentation. - Text inside
<pre>is typically shown in a monospaced font (like Courier). - You can combine
<pre>with<code>to represent formatted code blocks semantically. - Avoid excessive use for regular text — it’s meant for preformatted or technical content.
Conclusion
The <pre> tag is essential for displaying preformatted or code-style text where spacing and alignment are crucial.
It ensures that text appears exactly as written in the HTML, making it perfect for code snippets, ASCII art, or structured data displays.
