HTML Paragraphs

What is HTML paragraph?

In a html document a text between <p> tags defines a paragraph. Here p stands for paragraph.So whenever you'll write a text between <p> tags in HTML it'll be called a paragraph.

A paragraph is a block-level element and always starts on a new line. It's the most important element after headings in HTML document. Therefore p element is one of the most overused elements.

Syntax of HTML Paragraph-

Fig.1 - diagram of HTML paragraph

In the above picture it displays the syntax of html paragraph. Paragraphs are always expressed between the element's start tag and end tag as shown in syntax.

Note: Though elements are case-insensitive,it is recommended to use lowercase for p elements.

Example of HTML paragraph-

<!DOCTYPE html>
<html>
  <head>
    <meta charset=”UTF-8”>
    <title>HTML Paragraphs Example</title>
  </head>
  <body>
   <p> I am first paragraph  </p>
   <p> I am second paragraph  </p>
   <p> I am third paragraph  </p>
  </body>
</html>

Result

html-paragraphs-example-grphics
Fig.2 - Example of HTML paragraphs

Here you can notice paragraphs are not at same line. It is because paragraph is block-level element and takes full width. Also notice that space between two p elements because of margin what is default style of the p element. Unlike headings elements, p element is not bold.

Uses of p element-

  • Any block-level element can contain p element.
  • Usually p elements are used after headings.
  • If you want to describe about a topic,use p elements.
  • You can have multiple p elements in a html document.
Note: Don't use p element because of its font-size.You can use CSS or style attribute for changing style of text.

Use closing p tag-

Don't forget to close p elements. Though Most browsers will display p elements correctly but you can have problem to give it a style and moreover you can get unexpected result.

Space problem inside p element

Browsers ignore white spaces between texts inside of p element what is default style of p element.

Example of space problem inside p element

<!DOCTYPE html>
 <html>
   <head>
     <meta charset=”UTF-8”>
     <title> Paragraph Space problem Example</title>
   </head>
   <body>
    <p> I            am            first         paragraph  </p>
    <p> I          am       second         paragraph  </p>
   </body>
 </html>

Result

html-paragraphs-space-problem-grphics
Fig.3 - Example of space problem inside p element

As you can see it doesn't matter for browser how many spaces there are between texts inside p element. See the soluation of it below-

Add more Space between texts inside p element-

If you want to add more spaces between texts inside p element then use &nbsp;. See the example below- 

<!DOCTYPE html>
<html>
  <head>
    <meta charset=”UTF-8”>
    <title> Adding more spaces inside of p element</title>
  </head>
  <body>
   <p> I&nbsp;&nbsp;&nbsp;&nbsp;am first&nbsp;&nbsp;paragraph  </p>
   <p> I am &nbsp;&nbsp;&nbsp;second&nbsp;&nbsp;&nbsp;&nbsp;paragraph</p>
  </body>
</html>

Result

adding-more-spaces-inside-of-p-element-grphics
Fig.4 - Example of adding more spaces inside of p element

Now you can see the spaces between texts inside of p element.

Line breaks inside of p element-

As you can see browsers ignore spaces,same problem happens when you want to break a line of text. So if you want to break a line of text then use <br> tag. <br> is a self-closing element so you don't need a closing tag. So now for better understanding see the example below-

<p>I am a paragraph <br> with line break.</p>
<p>I am <br>another paragraph <br> with line break.</p>

Result

line-break-example-inside-paragraph-grphics
Fig.5 - Line break example inside of p element

Horizontal rule for paragraph-

The hr element is rendered as a horizontal line. If there is a change of topic then you can use <hr> tag. <hr> tag is also a self-closing element so you don't need a closing tag or any content inside of it. You can see the example below-

<p>I am paragraph 1.</p>
<hr>
<p>I am  paragraph 2.</p>

Result

horizontal-rules-for-p-element-grphics
Fig.6 - Horizontal rules for p element

Preformatted text inside of p element-

As you can see white space, including carriage returns, extra spaces, and tabs,are ignored by browser So if you want to write a poerty with formatted text then you can use this <pre> tag inside of paragraphs. see the example below-

<p>I heard the bells on Christmas Day
     Their old, familiar carols play,
         And wild and sweet
         The words repeat
Of peace on earth, good-will to men!</p>
<hr>
<p><pre>I heard the bells on Christmas Day
     Their old, familiar carols play,
         And wild and sweet
         The words repeat
Of peace on earth, good-will to men!</pre></p>

Result

Preformatted-text-grphics
Fig.7 - Preformatted text inside of p element

So any formatted text if you want to maintain that format then use this <pre> element.