HTML Paragraph tag – HTML Line Breaks

DataFlair Team

4 years ago

Free Web development courses with real-time projects Start Now!!

In HTML, or paragraph element is used to define paragraph in an HTML document. Paragraphs are basically blocks of similar content, images, links, etc grouped together and displayed on a web-page. It always starts with a new line and browsers automatically add some white-spaces before and after each paragraph. It has a starting tag and an ending tag. In this HTML Tutorial, we will learn HTML Paragraph tag in detail.

Importance of HTML Paragraph Tag

Paragraphs give a structural view to the document, making it more readable.
Paragraphs can contain related content such as text, images,forms,etc.
It demarcates a particular block of content from the rest of the content, thus making it easier to comprehend.

Properties of HTML Paragraph

The browsers add some white spaces before and after each paragraph.
Multiple spaces specified by the user,within a paragraph,are reduced to single space by the browser.
Similarly, multiple lines entered within a paragraph are reduced to a single line.
Browsers separate the paragraphs by a blank line.

Default CSS for Paragraphs in HTML

p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

These properties can be manipulated and overridden as per the user’s/developer’s preferences.

Below is an example of a basic paragraph-
Code-

<!DOCTYPE html>  
<html>  
<head>  
<title>DataFlair</title>  
</head>  
<body>  
<p>Welcome to DataFlair. This is Paragraph1</p>
<p>This is Paragraph2</p>  
</body>  
</html>

Output-

Preserving Multiple Lines and Spaces

As observed, the browser considers multiple lines and multiple spaces as a single line and space respectively. This could create problems at many instances, suppose when the user actually needs to display the content with multiple spaces and lines.

Below is the code, containing a poem, depicting the problem.

Code-

<!DOCTYPE html>  
<html>  
<head>  
<title>DataFlair</title>  
</head>  
<body>  
<p>
    Twinkle, twinkle,      little star, 
    How I wonder what you are! 
    Up above the world so high, 
    Like a diamond in the sky.
</p>
</body>  
</html>

Technology is evolving rapidly!
Stay updated with DataFlair on WhatsApp!!

Output-

As seen, multiple lines and spaces have not been preserved.

Solutions for the above problem:

1. Create Line Breaks in HTML

Line break tag can be used to preserve the multiple lines. For example,
Code-

<!DOCTYPE html>  
<html>  
<head>  
<title>DataFlair</title>  
</head>  
<body>  
<p>
    Twinkle, twinkle,little star, 
    <br>
    How I wonder what you are! 
    <br>
    Up above the world so high, 
    <br>
    Like a diamond in the sky.
    <br>
</p>
</body>  
</html>

Output-

2. Create Spaces in HTML

In order to create spaces, &nbsp is useful. For example,
Code-

<!DOCTYPE html>  
<html>  
<head>  
<title>DataFlair</title>  
</head>  
<body>  
<p>
    Twinkle, twinkle,little&nbsp;&nbsp;&nbsp;star, 
    <br>
    How I wonder what you are! 
    <br>
    Up above the world so high, 
    <br>
    Like a diamond in the sky.
    <br>
</p>
</body>  
</html>

Output-

3. Use <pre> Element in HTML

The <pre> element preserves the formatting of the content, as done by the developer/user.

For example,
Code-

<!DOCTYPE html>  
<html>  
<head>  
<title>DataFlair</title>  
</head>  
<body>  
<p>
<pre>
    Twinkle, twinkle,little    star, 
    How I wonder what you are! 
    Up above the world so high, 
    Like a diamond in the sky.
</pre>
</p>
</body>  
</html>

Output-

<hr> tag with Paragraphs in HTML

The horizontal rule tag <hr> is useful with paragraphs to clearly distinguish and demarcate them from one another.

For example,
Code-

<!DOCTYPE html>  
<html>  
<head>  
<title>DataFlair</title>  
</head>  
<body>
<h1> Welcome to DataFlair!</h1> 
<h2>About Us</h2> 
<p>
We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.
DataFlair team comprises of trainers who are experts in their relevant technologies and are selected after many rounds of interviews, content team that continuously works hard to provide quality content to the readers, Marketing team that work hand in hand with other teams to make the content reaches the right audience and HR team that work to extend the team and to provide a healthy work environment.
</p>
<hr>
<h2>Vision</h2>
<p>
To provide the best training in latest cutting edge technologies across the globe and help learners carve their career.
</p>
<hr>
</body>  
</html>

Output-

HTML Paragraph Align Attribute

The text-align property of style attribute is for aligning a paragraph.

For example,
Code-

<!DOCTYPE html>  
<html>  
<head>  
<title>DataFlair</title>  
</head>  
<body>
<h1> Welcome to DataFlair!</h1> 
<h2>About Us</h2> 
<p style="text-align: center;">
We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.
DataFlair team comprises of trainers who are experts in their relevant technologies and are selected after many rounds of interviews, content team that continuously works hard to provide quality content to the readers, Marketing team that work hand in hand with other teams to make the content reaches the right audience and HR team that work to extend the team and to provide a healthy work environment.
</p>
<h2>Vision</h2>
<p style="text-align: right;">
To provide the best training in latest cutting edge technologies across the globe and help learners carve their career.
</p>
</body>  
</html>

Output-

Other global attributes such as class and id, can also be used with paragraph elements. The related CSS properties will be discussed in the preceding articles.

Along with the style’s attribute text-align property, paragraph’s ‘align’ attribute can also be used to align it. For example:

Code-

<!DOCTYPE html>  
<html>  
<head>  
<title>DataFlair</title>
<style type="text/css">
@import url("style.css");
</style>
</head>  
<body>
<h1 style="text-align: center;"><u><i> Welcome to DataFlair</i></u></h1> 
<h2 style="text-align: center;"><u>About Us</u></h2> 
<p align="center">
We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.
DataFlair team comprises of trainers who are experts in their relevant technologies and are selected after many rounds of interviews, content team that continuously works hard to provide quality content to the readers, Marketing team that work hand in hand with other teams to make the content reaches the right audience and HR team that work to extend the team and to provide a healthy work environment.
</p>
</body>  
</html>

Output-

Summary

In this article, we have looked at the HTML paragraph tag – HTML element – which is its most basic element. Paragraph element in HTML is useful to create blocks of related content on a web page and provide a systematic structure. We’ve delved into the properties of the element and the attributes used to manipulate and style it.

Hope you enjoyed the article!!!