HTML Paragraph tag – HTML Line Breaks
Free Web development courses with real-time projects Start Now!!
In HTML, <p> 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 <p> tag and an ending </p> 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.
The paragraph tag is important in web development as it improves the visual organization of the text. It improves user experience by breaking up large chunks of text, making it easier to read and follow. Also, properly structured paragraphs help in SEO by providing clear information to search engines.
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>
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 <br> 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,   is useful. 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-
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 <p> 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 <p> element and the attributes used to manipulate and style it.
Hope you enjoyed the article!!!
You give me 15 seconds I promise you best tutorials
Please share your happy experience on Google
