HTML Paragraphs
The <p> tag in HTML signifies a paragraph. Enclosed within the opening <p> and closing </p> tags, any content is recognized as a paragraph. As a block-level element, a new paragraph inherently starts on a fresh line, with browsers intuitively adding space before and after a paragraph for enhanced readability.
Syntax:
<p> Content </p>
Properties of the paragraph Tag
- The browser reduces multiple spaces added by users to a single space.
- If a user adds multiple lines, the browser compresses them into a single line.
- By default, the display of the paragraph element is set to “block,” meaning each new paragraph is placed on a new line. This behavior can be modified using CSS.
Example 1: The example explains the HTML <p> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>The p tag</title>
</head>
<body>
<p>A Computer Science portal for Beginner.</p>
<p>It contains well written, well thought articles.</p>
</body>
</html>
Output:
Multiple p Tags
Example 2: This example explains the HTML <p> tag having multiple lines.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML p tag</title>
</head>
<body>
<p>
This paragraph has multiple lines.
But HTML reduces them to a single line,
omitting the carriage return we have used.
</p>
<p>
This paragraph has multiple spaces.
But HTML reduces them all to a single
space, omitting the extra spaces and
line we have used.
</p>
</body>
</html>
Output:
p tag with multiple lines
The <br> tag
The HTML <br> tag element creates a line break, giving you a new line without starting a new paragraph. Use <br> when you want to move to the next line without beginning a whole new paragraph.
Syntax:
<br>
Example: This example explains the <br> tag inside the <p> tag to add the line-break.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML paragraph
</title>
</head>
<body>
<p>
This paragraph has multiple
<br />lines. But HTML reduces them
<br />to a single line, omitting
<br />the carriage return we have used.
</p>
</body>
</html>
Output:
Use of br tag inside the p tag
The <hr> tag
The HTML <hr> tag is used to create a horizontal rule or line, visually separating content on a webpage. Use <hr> when you want to insert a horizontal line to signify a division between sections or elements, providing a clear visual break in the page.
Syntax:
<hr>
Example: In this example we will use the <hr> tag with an example by using <p> tag also.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML Horizontal Rule Example</title>
</head>
<body>
<h1>
Welcome to My Website
</h1>
<p>
w3wiki is a leading
platform that provides computer
science resources and coding challenges
</p>
<hr>
<p>
w3wiki is a leading platform
that provides computer science resources
and coding challenges
</p>
</body>
</html>
Output:
Output
Align attribute
The <p> tag specifically supports the alignment attribute and allows us to align our paragraphs in left, right, or center alignment.
Syntax:
<p align="value">
Example: This example explains the align attribute to align the content in the <p> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML paragraph
</title>
</head>
<body>
<p align="center">
Welcome Beginner
</p>
<p align="left">
A Computer Science portal for Beginner.
</p>
<p align="right">
It contains well written, well thought articles.
</p>
</body>
</html>
Output:
Use of align attribute in p tag
The <pre> tag
The HTML <pre> tag is used for pre-formatted text. It keeps the original spaces and line breaks exactly as they are in the code. When you use <pre>, the text appears in a fixed-width font, preserving the formatting and layout just as it looks in the HTML code.
Syntax:
<pre> Content </pre>
Example: This example explains the use of the <pre> tag in the <p> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML paragraph
</title>
</head>
<body>
<pre>
This paragraph has multiple
lines. But it is displayed
as it is unlike the paragraph
tag.
</pre>
<pre>
This paragraph has multiple
spaces. But it is displayed
as it is unlike the paragraph
tag.
</pre>
</body>
</html>
Output:
Use of pre tag in the p tag
Browser Support
- Google Chrome: 1
- Edge: 12
- Firefox: 1
- Opera: 15
- Safari: 1
Contact Us