HTML Paragraphs
A paragraph in HTML is simply a block of text enclosed within the <p> tag. The <p> tag helps divide content into manageable, readable sections. It’s the go-to element for wrapping text in a web page that is meant to be displayed as a distinct paragraph.
Syntax:
<p> Content</p>How HTML Paragraphs are Rendered?
In HTML, when you wrap text inside the <p> tag, it automatically:
- Adds space before and after the paragraph to visually separate it from other content.
- Breaks the text into a single block, creating an easy-to-read section.
HTML Paragraph Code Example
Example 1: Here’s an example showing two paragraphs in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>The p tag</title>
</head>
<body>
<p>A Computer Science portal for geeks.</p>
<p>It contains well written, well thought articles.</p>
</body>
</html>
Output:
Properties of the paragraph Tag:
- The browser reduces multiple spaces added by users to a single space.
- If a user adds various lines, the browser compresses them into one 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 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:
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:
The Horizontal Rules <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>
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:
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">Note: The align attribute is deprecated in HTML5, and styles should be used via CSS for better practices.
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 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:
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:
Avoiding Common Mistakes with Paragraphs
- Avoid Nested Paragraphs: You cannot nest paragraphs within one another. Each
<p>tag should contain only the text for one block of content. - Avoid Using
<p>for Non-Textual Content: The<p>tag is meant for text-based content. If you need to wrap images, tables, or other elements, use appropriate tags like<img>,<table>, or<div>.
Supported Browsers
- Google Chrome: 1
- Edge: 12
- Firefox: 1
- Opera: 15
- Safari: 1
