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.
Example:
<!DOCTYPE html> <html> <head> <title>Paragraph</title> </head> <body> <p>A Computer Science portal for geeks.</p> <p>It contains well written, well thought articles.</p> </body> </html> |
Output:
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 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.
<!DOCTYPE html> <html> <head> <title>Display_Paragraph</title> </head> <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:
Break Line 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.
Example:
<!DOCTYPE html> <html> <head> <title>Display_Paragraph</title> </head> <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>
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:
<!DOCTYPE html> <html> <head> <title>Paragraph</title> </head> <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:
We 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.
Example:
<!DOCTYPE html> <html> <head> <title>Display_Paragraph</title> </head> <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:
leave a comment
0 Comments