Skip to content
Related Articles

Related Articles

Improve Article

HTML Paragraphs

  • Difficulty Level : Basic
  • Last Updated : 20 May, 2021

<p> tag: The <p> tag in HTML defines a paragraph. These have both opening and closing tag. So anything mentioned within <p> and </p> is treated as a paragraph. Most browsers read a line as a paragraph even if we don’t use the closing tag i.e, </p>, but this may raise unexpected results. So, it is both a good convention, and we must use the closing tag. 
 

Syntax: 

<p> Content </p> 

Example

HTML




<!DOCTYPE html>
<html>
  <body>
    <p>A Computer Science portal for geeks.</p>
    <p>
       It contains well written, well thought
       articles.
    </p>
  </body>
</html>

Output
 



Key Points: When we look at the webpage, we see that there are few spaces added before and after a paragraph. HTML does this by default. Let’s look at few properties of the paragraph tag: 

  • As already mentioned, the<p>tag automatically adds space before and after any paragraph, which is basically margins added by the browser.
  • If a user adds multiple spaces, the browser reduces them it to a single space.
  • If a user adds multiple lines, the browser reduces them to a single line.

Example: 

HTML




<!DOCTYPE html>
<html>
  <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
 

<br> tag: There is a way to let the HTML know where does the browser need to change the lines by the use of <br> tag. These tags do not have any closing tag. So, just a single opening tag will change the line.
 

Syntax: 

 <br> 

Example

HTML




<!DOCTYPE html>
<html>
  <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
 



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">

Example

HTML




<!DOCTYPE html>
<html>
  <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
 

<pre> tagWe have seen how the paragraph tag ignores all the change of lines and extra spaces within a paragraph, but there is a way to preserve this by the use of <pre> tag. It also contains an opening and a closing tag. It displays a text within a fixed height and width and preserves the extra lines and spaces we use.
 

Syntax: 

<pre> Content </pre> 

Example
 

HTML




<!DOCTYPE html>
<html>
  <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
 

Supported Browsers: 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :