HTML Paragraphs

31 May, 2022
In this article, we will know the HTML Paragraph, & its basic implementation through the examples. The <p> tag in HTML defines a paragraph. These have both opening and closing tags. 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 1: 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>         <!-- Use of <p> tag -->     <p>A computer science portal for geeks.</p>  </body> </html>
Output:
HTML <p> tag
Example 2: This example explains the HTML <p> tag.
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:
Multiple <p> tags
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 a 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 to a single space.
If a user adds multiple lines, the browser reduces them to a single line.
By default, the display of the Paragraph element is set to “block” which you can change using CSS. This means that if you add another paragraph to the webpage the next paragraph will be inserted in the next line on the webpage.
Example: This example explains the HTML <p> tag having multiple lines.
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:
<p> tag with multiple lines
<br> tag: There is a way to let the HTML know where the browser needs to change the lines by using the <br> tag. These tags do not have any closing tag. So, just a single opening tag will change the line.
Syntax: 
 <br> 
Example: This example explains the <br> tag inside the <p> tag to add the line-break.
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:
Use of <br> tag inside the <p> tag
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: This example explains the align attribute to align the content in the <p> tag.
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:
Use of align attribute in <p> tag
<pre> tag: We 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 the <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: This example explains the use of the <pre> tag in the <p> tag.
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:
Use of <pre> tag in the <p> tag
Supported Browsers: 
Google Chrome
Internet Explorer
Microsoft Edge
Firefox
Opera
Safari
nidhi_biet
ghoshsuman0129
shubhamyadav4
bhaskargeeksforgeeks
harsh464565
HTML-Tags
HTML
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
CSS to put icon inside an input element in a form
Design a Tribute Page using HTML & CSS
Types of CSS (Cascading Style Sheet)