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>Example 1: The example explains the HTML <p> tag.
<!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:
Multiple p Tags
Example 2: This example explains the HTML <p> tag having multiple lines.
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<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>
<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">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>
<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:
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>
<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
No comments:
Post a Comment