HTML - pre Tag

To understand pre Tag or pre Element, let us take the below example.

Example :

In   a    huge      pond, 
there  lived  many  fish. 
They were  arrogant  and 
never listened to anyone.

Now, all you need to do is, display the above story in the same way it is written. i.e. With new lines and spaces.

How would you do that?

If you would write it using <p> or <div> element, the text would be displayed in a single line and there would be no spaces or line breaks.

Confused?

Let us write it using <p> element.

Example :

<html>	
	<body>
		<p>
			In   a    huge      pond, 
			there  lived  many  fish. 
			They were  arrogant  and 
			never listened to anyone.
		</p>	
	</body>
</html>

Output :

So, if you look at the above output, the story got printed in a single line without line breaks and multiple spaces were replaced with a single space.

That's not what we wanted.

And this is where the pre tag comes into picture.

Pre tag or pre element in HTML

Let us rewrite the above example with pre tag or pre element.

Example :

<html>	
	<body>
		<pre>
			In   a    huge      pond, 
			there  lived  many  fish. 
			They were  arrogant  and 
			never listened to anyone.
		</pre>	
	</body>
</html>

Output :

So, if you look at the above output, the story got printed with line breaks, tabs and spaces. Exactly the way it is.

And that is because we have placed the text within the <pre> tags.

<pre>
	In   a    huge      pond,
	there  lived  many  fish.
	They were  arrogant  and
	never listened to anyone.
</pre>

What is the difference between pre and p tag?

As we have seen in the above examples, the pre tag displays the texts as is with line breaks, tabs and spaces. Whereas a p tag is used to represent a paragraph where the text is printed in one line with no line breaks and multiple spaces are drilled down to one space.

❮❮ PREV NEXT ❯❯