13. pre Tag

Introduction

The <pre> (preformatted) element preserves whitespace, line breaks, and formatting exactly as written in the HTML source. It’s commonly used for code blocks, ASCII art, or any content where exact formatting is important. The pre element also uses a monospace font by default.

Basic Usage

<pre>
    This text
    preserves    spaces
    and line breaks.
</pre>

Common Use Cases

Code Blocks

Displaying code:

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

ASCII Art

<pre>
    /\_/\
   ( o.o )
    > ^ <
</pre>

Formatted Text

Preserving formatting:

<pre>
Name:    John Doe
Email:   john@example.com
Phone:   123-456-7890
</pre>

Styling

Customize appearance:

<pre>
Code here
</pre>

<style>
    pre {
        background-color: #f4f4f4;
        padding: 1em;
        border-radius: 4px;
        overflow-x: auto;
    }
</style>

Best Practices

Use for Code

For code, consider using <code> with <pre>:

<pre><code>
function example() {
    return "Hello";
}
</code></pre>

References

• MDN Web Docs - pre element