HTML Paragraphs
In this article, we will know the HTML Paragraphs, & 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
<!DOCTYPE html>
<html>
<body>
<h2>Welcome akashtechviews</h2>
<!-- Use of <p> tag -->
<p>A computer science portal for akash.</p>
</body>
</html>
Output :
akashtechviews
a computer portal for akash
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.
<!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>
<br> tag:
There is a way to let the HTML know where does the browser need 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> 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.
<!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>
<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 <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.
<!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>
0 comments:
Post a Comment