HTML Paragraphs

The HTML <p> element defines a paragraph where browsers automatically add spacings on top and bottom of the element. It also occupies entire width of the screen.

Since browsers automatically remove more than once character space between characters or words or sentences in a webpage, it is very important to use HTML paragraphs to make the contents visually oraganized and pleasing.

Lets add a paragraph with multiple number of text lines and see the result.

<p>
Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in 
reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt 
mollit anim id est laborum.
</p>

Result:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lets add another paragraph with huge spacings between words and see the result.

<p>
Lorem ipsum 		dolor sit amet, 
consectetur 	adipisicing elit, 		sed do eiusmod
tempor incididunt 		ut labore et dolore 	magna aliqua. 
Ut enim ad minim veniam,
quis nostrud exercitation 	ullamco laboris nisi 		ut aliquip ex ea commodo
consequat. Duis 	aute irure dolor 		in 
reprehenderit in voluptate 		velit esse
cillum 		dolore eu 		fugiat nulla pariatur. 
Excepteur sint 		occaecat cupidatat 		non
proident, sunt in culpa qui 		officia deserunt 
mollit anim id 		est laborum.
</p>

Result:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML Line Breaks

The HTML <br> element defines a line break. You can use <br> whenever you want your contents to appear in a new line without starting a new paragraph. <br> is an empty tag which has no closing or ending tag.

<p>This is a paragraph<br>with line breaks.</p>

The HTML <pre> Element

The HTML <pre> element defines preformatted text which preserves both spaces and line breaks. It is highly useful while adding contents like poems or mathematical equations with unusual spacings and line breaks.

<pre>
Lorem ipsum 		dolor sit amet, 
consectetur 	adipisicing elit, 		sed do eiusmod
tempor incididunt 		ut labore et dolore 	magna aliqua. 
Ut enim ad minim veniam,
quis nostrud exercitation 	ullamco laboris nisi 		ut aliquip ex ea commodo
consequat. Duis 	aute irure dolor 		in 
reprehenderit in voluptate 		velit esse
cillum 		dolore eu 		fugiat nulla pariatur. 
Excepteur sint 		occaecat cupidatat 		non
proident, sunt in culpa qui 		officia deserunt 
mollit anim id 		est laborum.
</pre>

HTML Align Attributes for Paragraphs

With HTML <p> tags, you can use align attribute to align the contents to the left, center and right of the screen. In case of larger paragraphs, you can also use attribute align="justify" to distribute the content equally to the left and right of the entire width.

0 Like 0 Dislike 0 Comment Share Tweet