Learnerslesson
   JAVA   
  SPRING  
  SPRINGBOOT  
 HIBERNATE 
  HADOOP  
   HIVE   
   ALGORITHMS   
   PYTHON   
   GO   
   KOTLIN   
   C#   
   RUBY   
   C++   
   HTML   
   CSS   
   JAVA SCRIPT   
   JQUERY   
JAVA SPRING SPRINGBOOT HIBERNATE HADOOP HIVE ALGORITHMS PYTHON GO KOTLIN C# RUBY C++ HTML CSS JAVA SCRIPT JQUERY


❮❮ PREV NEXT ❯❯


HTML - Paragraphs


All of us know what a paragraph is. While reading a book, we find paragraphs. Also in websites there are paragraphs. And in this tutorial we will learn how to define a paragraph for a website.


How do we define a paragraph?


Defining a paragraph is quite simple. It is achieved in HTML using <p>...</p> tag.


Just place the text inside the <p>...</p> tag and HTML would treat that text as paragraph.


Example : 



<html>
	<body>
        <p>This is the first paragraph</p>
        <p>This is the second paragraph</p>
	</body>
</html>


Output :



 

So in the above example, we have defined two paragraphs using the <p>...</p> tag.


<p>This is the first paragraph</p>
<p>This is the second paragraph</p>

Now, if you see the output, the text This is the first paragraph is treated as a paragraph and This is the second paragraph is also treated as a paragraph. There is a newline between the paragraphs.


Now, let's say we have a paragraph with lot of new lines,


This is a paragraph
that has lot
of newlines.

Example : 



<html>
<body>
    <p>
    This is a paragraph
	that has lot 
	of newlines.
    </p>
</body>
</html>


Output :



 

So, in the above example, we have a paragraph with three new lines,


This is a paragraph
that has lot
of newlines.

Now, if you see the output, the paragraph is printed in one line.


This is a paragraph that has lot of newlines.

That is because HTML omits the newlines and extra spaces from a paragraph.


So, how do we solve this problem?


There are two ways to solve this problem.


The first one is using <br/> tag.


Using <br/> tag


Example : 



<html>
<body>
    <p>
    This is a paragraph
    <br/>
	that has lot 
	<br/>
	of newlines.
    </p>
</body>
</html>


Output :



 

Now, if you at the output, we got the desired result with new lines.


This is a paragraph
that has lot
of newlines.

And all thanks to the <br/> tags. Which had placed new lines within the paragraph.


The second way is using <pre>...</pre> tag instead of <p>...</p> tag.


Using <pre> tag


To use <pre>...</pre> tag all we need to do is, replace <p> tag with <pre> tag. And your newlines and spaces would be intact.


Example : 



<html>
<body>
<pre>
This is a paragraph
that has lot 
of newlines.
</pre>
</body>
</html>


Output :



 

So, in the above example, all we have done is used <pre>...</pre> tag instead of <p>...</p> tag. And if you see the output the paragraph is as is with the desired newlines.


<pre>
This is a paragraph
that has lot
of newlines.
</pre>


❮❮ PREV NEXT ❯❯