Skip to content
Related Articles

Related Articles

Improve Article

HTML Paragraphs

  • Difficulty Level : Basic
  • Last Updated : 14 Sep, 2021

Example: In this example, we are using the <p> tag that is used for paragraphs in HTML.

HTML




<!DOCTYPE html>
<html>
  
<body>
  <h2>Welcome To GeeksforGeeks</h2>
  <!-- 
<p> tag used here-->
  
  <p>A computer science portal for geeks.</p>
  
</body>
  
</html>

Output:

<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 needs to change the lines by the use of the <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 changes 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 HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :