What Does the pre Tag Do

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

Syntax of the pre Tag

The syntax of the <pre> tag looks like this:

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

Key Features

• The <pre> tag maintains both spaces and line breaks, ensuring that text appears exactly as it was originally formatted.
• The <pre> tag has both an opening tag <pre> and a closing tag </pre>.
• Additional attributes can also be added for further customization.

When to Use the pre Tag

The <pre> tag is most effective when you want the text to display on your HTML page exactly as it was typed, without any formatting changes. It is especially useful for displaying code snippets or preformatted text from data files.

Example: Using the pre Tag

Here is an example of how the <pre> tag can be used to display a code snippet on an HTML page:

Program

<pre>
  {
    // A simple JavaScript program to print "Hello, World!"
    function greet() {
      console.log("Hello, World!");
    }
    greet();
  }
</pre>

Output

{
  // A simple JavaScript program to print "Hello, World!"
  function greet() {
    console.log("Hello, World!");
  }
  greet();
}

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 preformatted text, this tag ensures that your content appears exactly as intended.