Follow along with this text-based version of our interactive HTML <pre> tag tutorial. Learn about preserving whitespace, formatting code, and using monospace fonts for semantic content display.

Step 1

The <pre> tag displays preformatted text, preserving spaces, line breaks, and indentation exactly as written. It's commonly used to display code, ASCII art, or any text where formatting is important. The text inside <pre> is displayed in a monospace font.

<pre

Step 2

The <pre> tag preserves whitespace and line breaks. Multiple spaces are kept, and line breaks are respected. This is different from regular HTML where multiple spaces collapse into one and line breaks are ignored. The <pre> tag is perfect for displaying code snippets, formatted text, or structured data.

<pre>
  function hello() {
    console.log("Hello");
  }
</pre>

Step 3

Common use cases: displaying code snippets, showing formatted text with specific spacing, ASCII art, poetry with line breaks, and structured data. The <pre> tag renders text in a monospace font by default, making it ideal for code. You can combine it with <code> for semantic code display.

<pre><code>
  const x = 10;
  console.log(x);
</code></pre>

Step 4

In the browser, preformatted text displays exactly as written, with all spaces and line breaks preserved. The text appears in a monospace font, making it easy to read code and formatted content. This is essential for displaying code examples and maintaining readability.

<pre>
  Line 1
  Line 2
    Indented
</pre>

Step 5

Checkpoint: Which element preserves spaces and line breaks in text?

<pre>
  Preformatted
  Text
</pre>

Step 6

Correct! The <pre> tag preserves spaces and line breaks in text. It's perfect for displaying code, formatted text, or any content where whitespace matters. The text is displayed in a monospace font by default.

<pre>
  Preformatted
  Text
</pre>

Step 7

Now it's your turn. The <pre> tag is essential for displaying code and formatted text. Complete the challenges below to master the <pre> tag!

pre.html

1 / 7

📝

Tutor:The <pre> tag displays preformatted text, preserving spaces, line breaks, and indentation exactly as written. It's commonly used to display code, ASCII art, or any text where formatting is important. The text inside <pre> is displayed in a monospace font.

⭐ 0 EXP

Pre Mastery

Unlock nodes by learning pre and text formatting.

Concept 1: The Pre Tag

The <pre> tag displays preformatted text, preserving spaces, line breaks, and indentation exactly as written. It's commonly used to display code, ASCII art, or any text where formatting is important. The text inside <pre> is displayed in a monospace font.

System Check

Which element preserves spaces and line breaks in text?

Community Holo-Net

Share Preformatted Text Designs

Created effective preformatted content? Share your code and formatting strategies.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML <pre> Tag

Pascual Vila

Frontend Instructor.

Whitespace Preservation

The <pre> tag preserves whitespace and line breaks. Multiple spaces are kept, and line breaks are respected. This is different from regular HTML where multiple spaces collapse into one and line breaks are ignored. The <pre> tag is perfect for displaying code snippets, formatted text, or structured data.

Common Use Cases

Common use cases include: displaying code snippets, showing formatted text with specific spacing, ASCII art, poetry with line breaks, and structured data. The <pre> tag renders text in a monospace font by default, making it ideal for code. You can combine it with <code> for semantic code display.

Best Practices

Use <pre> when you need to preserve exact formatting. Combine with <code> for semantic code display. Be aware that long lines may overflow - consider using CSS to handle overflow. Use <pre> for code examples, formatted output, or any content where whitespace matters.

Pre Tag Glossary

<pre>: HTML element that displays preformatted text, preserving spaces, line breaks, and indentation exactly as written. Text is displayed in a monospace font by default. Perfect for code, formatted text, or any content where whitespace matters.
Whitespace Preservation: The <pre> tag preserves all whitespace (spaces, tabs, line breaks) exactly as written in the source code. Unlike regular HTML elements, multiple spaces don't collapse into one, and line breaks are respected.
Monospace Font: A font where all characters have the same width. The <pre> tag uses a monospace font by default, making it ideal for displaying code where alignment matters. Examples include Courier, Consolas, and Monaco.
<code>: HTML element that represents a fragment of computer code. Often used inside <pre> for semantic code display. While <code> provides semantic meaning, <pre> preserves formatting. They work well together.
Code Display: The <pre> tag is commonly used to display code snippets because it preserves indentation and formatting. Combining <pre> with <code> provides both semantic meaning and formatting preservation. Essential for documentation and tutorials.

📖 INDEX