Skip to main content

Preformatted Text

HTML provides several elements for defining text with a special meaning. One of such elements is the <pre> tag, which is used for displaying preformatted text. This tutorial will provide you with an in-depth understanding of the <pre> tag and how to effectively work with preformatted text in HTML.

What is Preformatted Text?​

Preformatted text in HTML is the text that is displayed exactly as written in the HTML file. This includes the spaces, line breaks, and tabs, which are typically ignored by the browser when rendering the HTML file.

To maintain these formatting details in the output, HTML provides the <pre> tag. The full form of <pre> is preformatted text.

How to Use the <pre> Tag​

To use the <pre> tag, you simply wrap your text within this tag. Here is the basic syntax:

<pre>
    This is preformatted text.   
</pre>

The content within the <pre> tag will retain all its formatting, including spaces, line breaks, and tabs.

An Example of Preformatted Text​

Consider the following example:

<pre>
    Hello, 
        This is an example of preformatted text.  
    Thanks!
</pre>

In the above example, the text within the <pre> tags will be displayed exactly as it is written, maintaining the line breaks and spaces.

Why Use Preformatted Text?​

There are several use cases where the <pre> tag can be useful:

  1. Code Snippets: If you are showing code snippets on your webpage, using the <pre> tag can help maintain the original formatting of the code.

  2. ASCII Art: The <pre> tag is also useful when displaying ASCII art, where the arrangement of characters is important.

  3. Tabular Data: For simple tabular data, the <pre> tag can be used to maintain the tab spaces.

Conclusion​

The <pre> tag is a useful tool in HTML for maintaining the original formatting of text. It is especially helpful when you want to display code, ASCII art, or tabular data on your webpage. However, note that using the <pre> tag will not provide any semantic meaning to your text, so it should be used judiciously.

Remember, the best way to learn is by doing. So, try using the <pre> tag in your next project and see how it works. Happy coding!