HTML Preformatted Text Tag
Hero
HTML Preformatted Text Tag
Learn how to use the HTML <pre> tag to display text, especially code snippets, exactly as it is typed with spaces and line breaks preserved.
Learning Outcomes: Understand how browsers handle whitespace and how the <pre> tag overrides this behavior.
Prerequisites: Basic understanding of HTML tags.
Reading Time: 4 min read
Difficulty: Beginner
Introduction
If you've ever tried to type multiple spaces or hit "Enter" multiple times inside a standard <p> tag, you likely noticed that the browser ignores them. HTML naturally collapses multiple whitespace characters into a single space. But what if you want to display a block of computer code, ASCII art, or formatted text exactly as you typed it? Enter the Preformatted Text Tag (<pre>).
Why This Matters
On an educational platform like himubey.in, displaying code snippets accurately is extremely important. When you are teaching someone how to write JavaScript or HTML, the indentation, spacing, and line breaks matter. The <pre> tag is the standard way to ensure your code is presented flawlessly to your students.
Core Concepts
- Whitespace Preservation: The
<pre>tag preserves both spaces and line breaks. - Monospace Font: By default, browsers render the content of a
<pre>tag using a fixed-width (monospace) font (like Courier), making it perfect for code. - Block-Level Element: It takes up the full width available and starts on a new line.
Syntax
Simply wrap your perfectly formatted text inside the <pre> tags.
<pre>
Text with weird
spacing and
line breaks.
</pre>
Real World Example
If you are writing a tutorial for Learn with Himanshu, you will often combine the <pre> tag with the <code> tag to semantically define a block of code.
<h3>Example JavaScript Function</h3>
<p>Here is how you write a basic greeting function:</p>
<pre><code>
function greetUser(name) {
if (name === "Himubey") {
console.log("Welcome back, Admin!");
} else {
console.log("Hello, " + name);
}
}
</code></pre>
Best Practices
- Combine with
<code>: When displaying code snippets, always place a<code>tag inside the<pre>tag. The<pre>tag handles the formatting, while the<code>tag provides the semantic meaning that the text is computer code. - Scrollbars: Since
<pre>tags preserve formatting, long lines of code might break your website's layout on mobile devices. Use CSS (overflow-x: auto;) to add horizontal scrollbars to your preformatted blocks.
Common Mistakes
Mistake: Indenting the content inside the <pre> tag to match the surrounding HTML indentation.
<!-- WRONG: The indentation spaces will be displayed on the screen! -->
<div>
<pre>
This text will have massive space on the left.
</pre>
</div>
Correct Approach: Keep the <pre> content flush to the left if you don't want extra spacing.
<!-- CORRECT -->
<div>
<pre>
This text will be aligned perfectly to the left.
</pre>
</div>
💡 Himubey Tip
When writing HTML inside a <pre> tag, the browser will still try to render the tags! If you want to show HTML code to your users, you must escape the brackets. Replace < with < and > with >.
Interview Questions
- How does HTML normally handle multiple spaces in a text block?
- What is the primary purpose of the
<pre>tag? - Why is it a good practice to nest a
<code>tag inside a<pre>tag? - How can you prevent a
<pre>block from overflowing the screen width on mobile devices?
Mini Challenge
Task: Display a small piece of code on your page.
- Create a
<pre>tag. - Inside it, add a
<code>tag. - Write a 3-line CSS snippet (e.g., changing the background color of the body). Ensure your indentation looks professional!
Summary
The <pre> tag is a powerful element for educators and developers. It overrides HTML's default whitespace collapsing, allowing you to display perfectly formatted code snippets, poems, and ASCII art. When paired with the <code> tag and a little CSS, it creates the perfect environment for sharing technical knowledge.