HTML <pre> Tag
The <pre> tag in HTML defines preformatted text. Text within a <pre> element is displayed in a fixed-width font, and both spaces and line breaks are preserved. This tag is particularly useful for displaying code snippets, ASCII art, or any text where the precise formatting is crucial.
Syntax
<pre>
Preformatted text content
</pre>
<pre class="class-name" id="element-id" style="css-rules">
Preformatted text content with attributes
</pre>
Attributes
| Attribute | Value | Description |
|---|---|---|
class |
class names | Specifies one or more class names for an element (often used to point to a class in a style sheet). |
id |
element id | Specifies a unique id for the element. |
style |
CSS rules | Specifies an inline CSS style for an element. |
accesskey |
character | Specifies a shortcut key to activate/focus an element. |
contenteditable |
true, false | Specifies whether the content of an element is editable. |
dir |
ltr, rtl, auto | Specifies the text direction for the content in an element. |
draggable |
true, false, auto | Specifies whether an element is draggable. |
hidden |
hidden | Specifies that the element is not yet, or is no longer, relevant. |
lang |
language code | Specifies the language of the element's content. |
spellcheck |
true, false | Specifies whether the browser should check the spelling of the element's content. |
tabindex |
number | Specifies the tabbing order of an element. |
title |
text | Specifies extra information about an element. |
Example
<pre>
This is a
preformatted
text.
Spaces and
line breaks
are preserved.
</pre>
More Examples
Code Snippet
The <pre> tag is commonly used to display code snippets. Often used in combination with the <code> tag to add semantic meaning and can be used with highlight.js or similar syntax highlighting libraries.
<pre>
<code>
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("World");
</code>
</pre>
ASCII Art
You can use <pre> to display ASCII art or diagrams where preserving spacing is essential.
<pre>
/\\_/\\
( o.o )
> ^ <
</pre>
Custom Styling
You can style <pre> elements using CSS. You can add custom font-family, background colors, padding, and more.
<pre style="background-color:#f0f0f0; padding:10px; font-family: monospace;">
This text has a gray background and custom font.
</pre>
Displaying Data
When dealing with data or configuration files, the pre tag can help in preserving the format and readability.
<pre>
{
"name": "example",
"version": "1.0.0",
"description": "An example configuration."
}
</pre>
Usage with CSS Classes
<pre class="code-block">
This is a styled code block with class "code-block".
</pre>
.code-block {
background-color: #e0e0e0;
padding: 15px;
border: 1px solid #ccc;
font-family: 'Courier New', Courier, monospace;
}
Browser Support
The <pre> tag is supported by all major browsers:
- Chrome
- Edge
- Firefox
- Safari
- Opera
Notes and Tips
- Semantic Meaning: While
<pre>preserves formatting, it doesn't convey semantic meaning like code blocks do. Consider using the<code>tag inside<pre>for code snippets, e.g.,<pre><code> your code </code></pre>. - Long Lines: Very long lines in a
<pre>element can cause horizontal overflow. You might consider settingoverflow-x: auto;in your CSS to add scrollbars instead of wrapping the content. - White Space Control: Avoid excessive leading or trailing whitespace in your source code within
<pre>tags, as they are also rendered literally. - CSS Styling: Use CSS to customize the appearance of your preformatted text. You can modify font properties, colors, background, padding, margins and other visual attributes.
- Accessibility: Ensure your use of
<pre>tags aligns with accessibility guidelines. Avoid using them for content that should be semantically structured. - Context is Key: Be mindful of when using
<pre>. While it's great for code and structured data, it may not be the best choice for typical text content. - Combination with
white-space: pre-wrap;: For long lines that you wish to wrap instead of getting a horizontal scrollbar, use the CSS propertywhite-space: pre-wrap;along with the<pre>tag. For example:<pre style="white-space: pre-wrap;"> Long line </pre>.
