Pre Tag

The <pre> tag serves as an indispensable tool in HTML for displaying preformatted text, such as code snippets in various programming languages.

What Does the <pre> Tag Do?

The <pre> tag preserves the original formatting of text, making it an excellent choice for displaying code or other preformatted content where spacing and indentation are important.

Unlike ordinary text inside a paragraph, whitespace and line breaks inside a <pre> element are preserved by the browser.

Syntax for Using the <pre> Tag

<pre>
    <!-- code snippet in any programming language -->
</pre>

Key Features

The <pre> tag maintains spaces and line breaks, helping text appear in its original formatting.
The <pre> tag has both an opening <pre> tag and a closing </pre> tag.
Additional attributes can be added for further customization.

When to Use the <pre> Tag?

The <pre> tag is most effective when you want text to display on your HTML page with its original spacing and line structure, without the browser collapsing the whitespace.

It is especially useful for displaying code snippets, structured text, or preformatted content from data files where the exact arrangement of the text matters.

Important: The <pre> tag preserves whitespace, but it does not automatically turn its contents into a programming-language syntax highlighter. Styling and syntax highlighting can be added separately.

Displaying a Simple Python Program and Its Output

In this section, we will use HTML to display a simple Python program that prints "Hello, World!" to the console. You do not need to know Python for this example; we are simply using the program to show how the HTML <pre> tag preserves formatting.

Python Program

# A simple Python program to print "Hello, World!"
def main():
    print("Hello, World!")

if __name__ == "__main__":
    main()

Program Output

The output below can also be displayed inside a <pre> element so that the line structure is preserved.

Hello, World!

The HTML code uses the <pre> element to display the content exactly as formatted, preserving indentation and line breaks.

<pre> and <code> Together

A common pattern when displaying source code is to place a <code> element inside a <pre> element. The <pre> element preserves the formatting, while <code> identifies the content as code.

<pre>
    <code>
        const message = "Hello, ShadowCraft!";
        console.log(message);
    </code>
</pre>

This combination is commonly used by documentation websites and tutorials when presenting multi-line source code.

Quick Example

FORMATTING PRESERVED

First line
    Second line with indentation
        Third line with more indentation

Notice how the indentation in the example remains visible. This is the main purpose of the <pre> element.

Video Tutorial

For a more comprehensive understanding, you can watch the following video tutorial:

Conclusion

In summary, the <pre> tag is a versatile tool for preserving the original formatting of text in HTML. Whether you are displaying code snippets or other preformatted text, this tag ensures that spaces and line breaks are kept as written.

ShadowCraft Tip: When displaying multi-line code, combining <pre> with <code> gives you a clear structure for both formatting and meaning.

Quick Summary

<pre> preserves spaces, indentation, and line breaks.
It uses both an opening and closing tag.
It is useful for code snippets and other preformatted text.
<pre> and <code> are often used together for multi-line code examples.