HTML Paragraph

Please Share On:

As everyone knows that a paragraph always starts with new lines and usually a combination of texts.

HTML  element defines a paragraph. It has both opening and closing tag .

Browser automatically add a margin before and after a paragraph.

Syntax:

<p> Some Text... </p>

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Headings</title>
  </head>
 
  <body>
     <p> I am a first paragraph. </p>
     <p> I am a second paragraph. </p>
     <p> I am a third paragraph. </p>
  </body>
</html>

Output:

try it yourself

Browser Display:

As already mentioned above, the tag adds a space before and after a paragraph, which is basically a margin added by your browser. The browser will remove extra spaces and lines when the page is displayed.

In the below example, the paragraph has been defined as using extra spaces and lines. Let’s see the browser output.

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Headings</title>
  </head>
 
  <body>
    <p> Here, this first paragraph 
      has multiple lines,
      but the browser
      will ignore
      the multiple lines   
    </p>
    
     <p> Here,          this second         paragraph 
      contains          lot of space          in the source code,
      but           the browser
      ignore   spaces 
      to display.   
    </p>
  </body>
</html>

Output:

try it yourself

HTML Horizontal Line:

<hr> tag is used to display a horizontal line.

<hr> tag is an empty tag, which means it doesn’t need a closing tag.

<hr> element is used to separate content in a webpage.

Syntax:

<hr>

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Headings</title>
  </head>
 
  <body>
    <h1> Australia </h1>
    <p> Some description about Australia.</p>
    <hr>
    
    <h1> Nepal </h1>
    <p> Some description about Nepal.</p>
    <hr>
    
  </body>
</html>

Output:

try it yourself

HTML Break Line

  element is used to break a line.

  tag is an empty tag, which means it doesn’t need a closing tag.

You just add a   tag whenever you need a line break.

Syntax:

<br>

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Headings</title>
  </head>
 
  <body>
    <h1> Line Break Example</h1>
    
    <h3>Paragraph without break tag</h3>
    <p>This is a paragraph which uses a line break html tag element. </p>
    
    <br>
    
    <h3> Paragraph with break tag</h3>
    <p>This is a paragraph <br> which uses a line break <br> html tag element.</p>
    
  </body>
</html>

Output:

try it yourself

HTML <pre> Tag:

So we have learned how paragraph  tag ignores all extra lines and spaces before displaying in a browser. But, there is a way to preserve this by using a <pre> tag.
<pre> tag contains an opening and closing tag.

<pre> Some Text... </pre>

It displays a text with extra lines and spaces we use.
The best example to use <pre> tag is on song’s lyrics. which are written into multiple lines.

Syntax:

<pre> 

Some Text... 

</pre>

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Headings</title>
  </head>
 
  <body>
    <pre>
      This paragraph has multiple
      lines and it is displayed
      as it is written in the 
      code.
    </pre>
    
    <pre>
      This paragraph      has multiple
      spaces      and it is         displayed
      as it is      written in the 
      code.
    </pre>
    
  </body>
</html>

Output:

try it yourself

You may be interested in the following topics:

Post Views: 585

Syntax:

Code:

Output:

Browser Display:

Code:

Output:

HTML Horizontal Line:

Syntax:

Code:

Output:

HTML Break Line

Syntax:

Code:

Output:

HTML <pre> Tag:

Syntax:

Code:

Output:

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.