HTML Tutorial

<pre> Tag in HTML

The <pre> tag in HTML is used to display preformatted text. Text inside the <pre> tag is displayed as it is, preserving both spaces and line breaks. This tag is often used for displaying code snippets or other content where the formatting should be preserved exactly as it is typed.

Key Points on <pre> Tag:

The <pre> tag retains the formatting of the text inside it, including spaces, tabs, and line breaks.
It is commonly used to display code blocks or ASCII art where exact formatting is important.
Text within the <pre> tag is displayed in a monospaced font (typically Courier or similar), which is well-suited for code display.
Unlike other HTML tags, it does not collapse multiple spaces into a single space, nor does it remove line breaks.

Syntax of <pre> Tag:

Syntax Example

<pre>
        This is preformatted text.
        Spaces    and    line breaks   are preserved.
        </pre>

Example of <pre> Tag in HTML:

This example demonstrates how the <pre> tag preserves formatting when used to display preformatted text.

Code Example

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>HTML <pre> Tag Example</title>
        </head>
        <body>
        
        <pre>
            ********** MENU **********
            1. Start Game
            2. Load Game
            3. Settings
            4. Exit
            ***************************
        </pre>
        </body>
        </html>

Output

    ********** MENU **********
    1. Start Game
    2. Load Game
    3. Settings
    4. Exit
    ***************************

The <pre> tag is a simple and effective way to display preformatted text on a webpage. It preserves the text's formatting, making it ideal for displaying code snippets, ASCII art, or any content where spacing and line breaks are significant.