HTML Paragraphs
Last Updated :
28 Dec, 2023
The <p> tag in HTML defines a paragraph. These have both opening and closing tags. So anything mentioned within <p> and </p> is treated as a paragraph. A paragraph is a block-level element so a new paragraph always begins on a new line, and browsers naturally put some space before and after a paragraph to make it look neat and easy to read.
Syntax:
<p> Content </p>
HTML Tag Reference:
Properties of the paragraph tag:
- As already mentioned, the<p>tag automatically adds space before and after any paragraph, which is basically margins added by the browser.
- If a user adds multiple spaces, the browser reduces them to a single space.
- If a user adds multiple lines, the browser reduces them to a single line.
- By default, the display of the Paragraph element is set to “block” which you can change using CSS. This means that if you add another paragraph to the webpage the next paragraph will be inserted in the next line on the webpage.
Example 1: In this example, we are using the <p> tag that is used for paragraphs in HTML.
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Welcome To GeeksforGeeks</h2>
<p>A computer science portal for geeks.</p>
</body>
</html>
|
Output:
HTML p tag
Example 2: This example explains the HTML <p> tag with another example.
HTML
<!DOCTYPE html>
<html>
<body>
<p>A Computer Science portal for geeks.</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.
HTML
<!DOCTYPE html>
<html>
<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
<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.
HTML
<!DOCTYPE html>
<html>
<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
<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.
HTML
<!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>
GeeksforGeeks is a leading
platform that provides computer
science resources and coding challenges
</p>
<hr>
<p>
GeeksforGeeks 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.
HTML
<!DOCTYPE html>
<html>
<body>
<p align="center">
Welcome Geeks
</p>
<p align="left">
A Computer Science portal for geeks.
</p>
<p align="right">
It contains well written, well thought articles.
</p>
</body>
</html>
|
Output:
Use of align attribute in p tag
<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.
HTML
<!DOCTYPE html>
<html>
<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
Supported Browsers:Â
- Google Chrome 1
- Microsoft Edge 12
- Firefox 1
- Opera 15
- Safari 1
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...