HTML Paragraph Tag | HTML paragraph element | How to Use the < p > Tag in HTML
In this lesson on HTML Tutorials, we will give you complete information about HTML Paragraph Elements. You will know what HTML Paragraph Element is. How is Paragraph Defined in HTML Document?
This lesson has been divided into several sections to understand the HTML Paragraph Element easily. Whose list is given below?
{tocify} $title={Table of Contents}
1. Introduction to HTML Paragraph
The Main Content of an HTML Document is written through Paragraphs. The P Element defines a paragraph in HTML.
HTML P Element is a Block Level Element. Which shows the content in Blocks. This means a group of text is formed.
You can define more than one Paragraph (s) in a Webpage. Each new Paragraph is determined by the Opening <p> Tag. And Closing </p> is closed by Tag.
2. Some Important Things to Know About HTML <P> Element
1. HTML P Element is a Basic HTML Tag, which is also called Block Level Element.
2. HTML Paragraph is defined by <p> Tag. And Closing </p> is closed by Tag.
Note – Must use Closing </p> Tag.
3. All Global Attributes can be used in the P Element. Apart from this, the P Element also supports Event Attributes.
4. All browsers add some space above and below the paragraph. This work is done by Browsers' Built-in Style Sheet.
5. Default Style of Browsers can be Overridden by Additional CSS.
3. Example of HTML Paragraph
Copy and paste the HTML code written below in your Notepad or type this code directly with your hands.
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>HTML Paragraph Example</title></head><body><p> Here is First Paragraph Text. </p><p> This is Second Paragraph. </p></body></html>{codeBox}
Save the HTML code written above as HTML-paragraph.html. And open it in your favourite browser. This HTML file will give you this type of Output Display.
4. Paragraph Alignment
(Align text left or right, center text, or justify text on a page)
By Default HTML Paragraph's Alignment is Left. Starting from the left side in the Paragraph Browser Window, it goes to the right side.
You see this set of paragraphs in newspapers and magazines as well.
You can override the Default Alignment of the Paragraph by using the Align Attribute.
4 Alignments can be set for a paragraph by HTML Align Attribute.
1. Left Alignment
2. Right Alignment
3. Center Alignment
4. Justify Alignment
1. Left Alignment
Left Alignment is set by default of HTML paragraphs. In this Alignment, the Paragraph goes from left to right in the Browser Window.
Left Alignment is used in the writing work of most of the world's languages. You can set Left Alignment in this way.
<p align="left">This paragraph is left aligned.</p>{codeBox}
2. Right Alignment
From Right Alignment, Paragraph Browser moves to the right side of the window. But, it is read from left to right only.
The Right Alignment of the Paragraph is set in this way.
<p align="right">This paragraph is right aligned.</p>{codeBox}
3. Center Alignment
With Center Alignment, the Paragraph Browser comes precisely in the middle of the window. Equal Margin Set is done on the left and right sides of the paragraph. And appears in the Paragraph Center.
This type of Alignment is set in this way.
<p align="center">This paragraph is center aligned.</p>{codeBox}
4. Justify Alignment
Justify Alignment appears in newspapers and magazines. And in most formal writing, Justify Alignment is used.
With this Alignment, there is equal space on the left and right sides of the paragraph text.
In Paragraph, Justify Alignment is set in this way.
<p align="justify">This paragraph is justified align.</p>{codeBox}
Paragraph Alignment Example
We have prepared an example by writing all the alignments mentioned above together.
In which all the Alignments are shown by applying them to different paragraphs.
You also copy and paste the HTML codes written below in your Notepad. Or type it with your hands.
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>HTML Paragraph Example</title></head><body><p align=”left”>This paragraph is left align.</p><p align=”right”>This paragraph is right align.</p><p align=”center”>This paragraph is center align.</p><p align=”justify”>This paragraph is justify align.</p></body></html>{codeBox}
Save the above HTML code as paragraph-alignment.html. And open it in your browser. This code will show you this type of Output.
OUTPUT
This paragraph is left align.
This Paragraph is right align.
This paragraph is center align.
This paragraph is justify align.
5. HTML Horizontal Rules
The <hr> tag describes a thematic break in an HTML page and is most often displayed as a horizontal rule.
The <hr> element is utilised to divide content (or define a change) in an HTML page:
NOTE: The <hr> tag is an empty tag, which means that it has no end tag.
<!DOCTYPE html><html><body><h1>This is heading example 1</h1><p>This is some text.</p><hr><h2>This is heading example 2</h2><p>This is some other text.</p><hr><h2>This is heading example 3</h2><p>This is some other text.</p></body></html>{codeBox}
OUTPUT
6. HTML Line Breaks
When you want to start a new line in a paragraph itself, the <br> element is used for this.
You cannot enter a new line by pressing Enter like in MS Word.
If you do this, then Poem Problem will be created.
<br> Element defines a new line in a paragraph. You can give Line Breaks as per your wish.
You can do the coding of Line Breaks in this way. see below
<p>This is the first line. <br> This is another line.</p>{codeBox}
The HTML <pre> Element
The HTML <pre> element describes preformatted text.
The text inside an <pre> element is shown in a fixed-width font (usually Courier), and it maintains both spaces and line breaks:
Example
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>HTML <pre> Element Example</title></head><body><pre>$("#main-nav #s").blur(function() {if (0 === this.value.length) this.value = c;});$("#main-nav #s").focus(function() {if (this.value === c) this.value = "";});</pre></body></html>{codeBox}
OUTPUT
$("#main-nav #s").blur(function() {
if (0 === this.value.length) this.value = c;
});
$("#main-nav #s").focus(function() {
if (this.value === c) this.value = "";
});Conclusion:
Friends, according to my expertise, I have written complete information to help you on “How to Use the < p > Tag in HTML.” If this post is favourable for you or not, please tell me by commenting.
If you liked this post, do not forget to share it with your friends so they can get information about it.
You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.
Please tell us through the comment section if you think we miss anything.
