HTML - <pre> Tag

Quiz

The HTML <pre> tag is used to define a block of pre-formatted text that is displayed exactly as written in the HTML code. White-space within this tag is shown as it is, preserving spaces, line breaks, tabs, and other formatting characters.

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

Syntax

Following is the syntax of <pre> tag −

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

Attributes

The HTML <pre> tag supports both Global and Event attributes. Additionally, it has some specific attributes, which are listed bellow.

Attribute	Value	Description
cols	number	Used to specify the visible width of the <pre> element.
width	number(pixles)	Use to specify the width of the element.
wrap	soft hard	It specify how the text will be wrapped: either soft or hard.

Example: Preformatted Paragraphs

In the following example, we create an HTML document to demonstrate the usage of the <pre> tag. Running the code will display the text within the <pre> tag on the webpage.

<!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>

Example: ASCII Art

Here, we will use the <pre> tag to render ASCII art. The HTML code displays preformatted ASCII art text, preserving spaces and breaks.

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

Example: Displaying Different Language

Let's consider the following example, where we create an HTML document and use 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>

Supported Browsers

Tag
pre	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page