PRE TAGS

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

Purpose of Pre tag

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

Syntax

app/index.html
1<pre>
2    <!-- code snippet in any programming language -->
3</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.

For Example

app/index.html
1<pre>
2  # A simple Python program to print "Hello, World!"
3def main():
4    print("Hello, World!")
5
6if __name__ == "__main__":
7    main()
8</pre>

Output

A simple Python program to print "Hello, World!"

def main(): print("Hello, World!")

if name == "main": main()

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.