You will learn how to use the <pre> element to display text with preserved whitespace, line breaks, and indentation exactly as written in your HTML source.
What it is
The <pre> (preformatted text) element defines a block of preformatted text. Unlike standard HTML elements that collapse multiple spaces into one and ignore newlines, <pre> preserves all whitespace characters. It typically renders content using a monospace font by default, making it ideal for displaying code snippets, ASCII art, or data tables where alignment matters.
Related terms: <code> (inline code), white-space: pre (CSS property), <textarea> (editable preformatted input).
Why it matters
- Code Display: Essential for showing programming examples without losing indentation or structure.
- Data Alignment: Useful for displaying tabular data or logs where column alignment is critical.
- ASCII Art: Allows precise placement of characters for simple graphics.
- Simplicity: Avoids the need for complex CSS hacks or non-breaking space entities (
) to maintain layout.
Syntax or steps
Wrap your text directly inside opening and closing <pre> tags. Ensure you escape any HTML special characters within the content if they are meant to be displayed literally rather than interpreted as markup.
- Open the tag:
<pre> - Insert your text, including desired newlines and spaces.
- Close the tag:
</pre>
Example
<pre>
function greet(name) {
console.log("Hello, " + name);
}
</pre>Explanation:
- The browser renders the text exactly as typed between the tags.
- The four-space indentation before
console.logis visible. - The line break after the opening brace is preserved.
- Note that if you wanted to display actual HTML tags like
<div>inside a<pre>, you must write them as<div>.
Common mistakes
- Forgetting to escape HTML: Writing
<html>inside<pre>will cause the browser to try to parse it as markup. Use<and>instead. - Nested Block Elements: Do not place other block-level elements (like
<p>or<div>) inside<pre>. It is designed for plain text. - Assuming Font Style: While browsers usually apply a monospace font, this is a default style. If you change the font via CSS, ensure it remains readable for aligned text.
- Horizontal Overflow: Long lines do not wrap automatically. You may need CSS
overflow-x: auto;to allow scrolling if the content exceeds the container width.
When to use it
Compare <pre> with standard paragraph usage or CSS-based whitespace handling.
| Feature | <pre> |
Standard <p> + CSS |
|---|---|---|
| Whitespace Handling | Preserves all spaces/newlines | Collapses spaces/ignores newlines |
| Best For | Code, ASCII art, fixed-width data | Prose, general text content |
| Responsiveness | Poor (requires overflow handling) | Excellent (wraps naturally) |
Practice
Guided Exercise: Create a <pre> block that displays a simple calendar grid for July 2024, ensuring days align under their respective headers.
Challenge: Modify your previous example to include an HTML comment <!-- This is a comment --> inside the <pre> block so it appears as text on the screen.
Hint: Remember to escape the angle brackets in the challenge.
Quick check
Question: Why might a developer add style="overflow-x: auto;" to a <pre> element?
Answer: To prevent long lines of text from breaking the page layout by allowing horizontal scrolling within the block.
Summary
The <pre> element is the semantic choice for displaying text where formatting, spacing, and line breaks are part of the meaning. Always remember to escape HTML entities within it and manage overflow for responsive designs.