HTML text formatting tags span a very wide range. An important text formatting tag in HTML is known as the “pre” tag. This tag is used to display text on a web page just like it is written inside the HTML script. It means that your HTML script or your browser will not format your text on its own; rather, it will preserve the formatting that you have kept while writing the script. By going through this guide, you will learn to use the pre tag in HTML.

Usage of the Pre Tag in HTML:

To use the pre tag in HTML, you can consider the following three examples:

Example # 1: Displaying Some Random Pre-Formatted Text on a Web Page:

In this example, we intend to display some random pre-formatted text on a web page by making use of the pre-tag of HTML. The HTML script that we have written for this purpose is shown in the image below:

In this HTML script, we have used the “pre” tag to enclose a random paragraph in it. You can see that this paragraph contains spaces and line breaks at random places. Our goal is to make this text appear as it is on the web page. This is exactly why we have made use of the HTML pre tag.

When we executed the HTML script shown above with the Google Chrome browser, our text appeared exactly as it is on the web page, as you can see from the following image. It means that the formatting of this text, i.e., the random spaces and line breaks have been preserved nicely because of the use of the HTML pre tag.

Example # 2: Displaying an Image on a Web Page:

In the second example, we will go a step further and try to draw an image by making use of the HTML pre tag. We intend to display a cow on our web page, because of which we have used the HTML script shown below:

In this example, we have drawn a cow in our HTML script by using different symbols. We wanted to preserve the formatting of this drawing because we have enclosed it within the pre tag of HTML.

When we executed this HTML script, our drawing appeared as it is on the web page as shown in the following image:

Example # 3: Displaying an Image without the Pre Tag in HTML on a Web Page:

In this example, we will slightly modify our second script to see the effect of removing the pre tag from that HTML script. This is shown in the image below:

When we executed the same script with the Google Chrome browser after removing the HTML pre tag, the formatting of our drawing got messed up and we only got to see some scattered symbols on the web page, as shown in the following image. This highlights the significance of using the pre tag in HTML.

Conclusion:

This article was meant to provide you with a thorough understanding of the pre tag in HTML. To convey this concept properly, we shared with you three detailed examples that make use of this HTML tag. Once you go through these examples, you will quickly learn to use this tag in HTML.