HTML - <pre> Tag

HTML <pre> tag is used to define a block of pre-formatted text that is to be presented exactly as written in the HTML code. Whitespace inside this tag is displayed as written, which means this <pre> tag preserves the text spaces, line breaks, tabs, and other formatting characters.

Syntax

<pre>.....</pre>

Attribute

HTML pre tag supports Global and Event attributes of HTML. Some specific attributes as well which are listed bellow.

HTML pre Tag Attributes

These attributes are not in use for new website.

Attribute	Value	Description
cols	number	Use to specify the visible width of pre element.
width	number(pixles)	Use to specify width of the element.
wrap	soft hard	It specify how the text will bewraped soft or hard.

Examples of HTML pre Tag

In the following examples we will see the use cases, where and how to use the HTML pre tag to represent the content as we want.

Preformatted Paragrapgh using pre Tag

In the following example, we are creating an HTML document and demonstrating the usage of the <pre> tag.

<!DOCTYPE html>
<html>
<body>
    <h2>Simply Easy Learning</h2>
    <pre> 
        Hi, Welcome to tutorialspoint,
        we make things easy for the users, 
        Users can learn here in the easy way. 
    </pre>
</body>
</html>

Rendering an ASCII art in pre Tag

Considering the another scenario, where we are going to use the pre tag to render an ASCII art.

<!DOCTYPE html>
<html>
<body>
    <pre> 
      _____      _             _       _                 _       _   
     |_   _|   _| |_ ___  _ __(_) __ _| |___ _ __   ___ (_)_ __ | |_ 
       | || | | | __/ _ \| '__| |/ _` | / __| '_ \ / _ \| | '_ \| __|
       | || |_| | || (_) | |  | | (_| | \__ \ |_) | (_) | | | | | |_ 
       |_| \__,_|\__\___/|_|  |_|\__,_|_|___/ .__/ \___/|_|_| |_|\__|
                                            |_|                      
    </pre> 
</body>
</html>

Creating an Other language

Let's look at the following example, where we are creating an HTML document and using the <pre> tag to write a C program.

<!DOCTYPE html>
<html>
<body>
   <pre >
      #include <stdio.h>
      int main() {    
         int number1, number2, sum;   
         printf("Enter two integers: ");
         scanf("%d %d", &number1, &number2);
      
         // calculate the sum
         sum = number1 + number2;    
         printf("%d + %d = %d", number1, number2, sum);
         return 0;
      }
   </pre>
</body>
</html>

If you have to display reserved characters within the <pre> tag, such as <, >, &, and ", the characters must be escape using their appropriate HTML entities (An HTML entity is a piece of text called a "string" that begins with an ampersand (&) and ends with a semicolon (;)). The text inside the <pre> element is displayed in a fixed-width font; however, it can be changed with CSS.

Supported Browsers

Tag
pre	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm