Welcome to HTML5-Tutorials

Our site offers a lot of HTML5 learning from absolutely beginning to advanced level.If you want to make a website with HTML,this site will completely guide you a lot.So learn HTML5 syntax and form of coding easily with this website.If you have any doubt,leave a message on us.We will return you so soon.This site includes innumerable number of references you need to do after studying their corresponding elements.

In this page,we will learn about HTML <pre> tag.

Use of <pre> tag

The <pre> tag defines preformatted texts. It preserves both line space and line breaks such that the texts written within the <pre> tag and </pre> tag will be displayed on web-browsers just same as we have written on the text-editor.

Display:Inline

Example of <pre> tag

    <pre>
          This is first line.
          This is second line.
    </pre>

Supported Browsers.

Tag
<pre> Yes Yes Yes Yes Yes

Full Code Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- With <pre> tag -->
<pre>
This is first line.
This is second line.
This is third line.
</pre>
<!-- Without <pre> tag -->
This is first line.
This is second line.
This is third line.
</body>
</html>

Output

 
This is first line. 
This is second line. 
This    is third   line. 

This is first line. This is second line. This is third line.

More Reference

From the above example you know that <pre> element preserves both line spaces and line breaks.
The <pre> element is mostly used to display some sorts of code or any unusual texts

Default CSS properties of <pre> tag

    pre {
       font-family:monospace;
       display:block;
       white-space:pre;
       margin:1em 0;
    }

Attribute of <pre> tag


Attribute Value Notes
width number It specifies the maximum number of character per line.

The width attribute is not supported in HTML5.