HTML Paragraphs
In this tutorial, we will learn about HTML Paragraphs and their fundamental implementation through examples. In HTML, the <p> element denotes a paragraph. This element contains both opening and closing tags.
As a result, everything included between <p> and </p> is considered as a paragraph. Even if we don't use the closing tag, i.e., </p>, most browsers will perceive a line as a paragraph, which may result in unexpected consequences. As a result, it is both a good convention and a requirement that we use the closing tag.
Syntax
<p> Contents here... </p>Example
<html><body>•<h2>Welcome To Webtutor.dev</h2><!-- We build websites --><p>We build shells.</p> </body></html>Key Points: When we glance at the website, we notice there are a few extra spaces before and after each paragraph. HTML is programmed to do this by default. Let's take a look at some of the paragraph tag's properties:
-
As previously stated, the
<p>tag automatically adds space before and after any paragraph, which is essentially browser margins. - When a user enters numerous spaces, the browser condenses them into a single space.
- When a user enters many lines, the browser condenses them into a single line.
Example
<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 lines we have used.</p></body></html><br> tag
The <br> element can be used to tell HTML where the browser should modify the lines. There is no closing tag for this tag. As a result, changing the line with a single opening tag is simple.
Syntax
<p>Contents <br> here.... </p>Example
<html><body><p>This paragraph has multiple<br>This example shows how to use<br>tag within the<br>element to add a line break</p></body></html>Align attribute
The <p> element supports the alignment feature and allows us to align our paragraphs to the left, right, or center.
Syntax
<p align="value">Example
<html><body><p align="center">We build websites</p><p align="left">Welcome To Webtutor.dev Website.</p><p align="right">We build Shells.</p> </body></html><pre> tag
We've seen how the paragraph tag ignores any line modifications and additional spaces within a paragraph, but there's a method to keep this by using the <pre> tag. It also has a tag for the beginning and a tag for the end. It keeps the extra lines and spaces we use while displaying text inside a specified height and width.
Syntax
<pre> Contents here... </pre>Example
<html><body><pre>This paragraph has multiple lines. But it is displayed as it is unlike the paragraph tag. </pre></body></html>FAQs
Yes, you can use other HTML tags inside a <p> tag. This is known as nested HTML elements (which you learnt about in an earlier lesson). However, it's important to note that some tags, such as the <div> tag (which you will learn about later), are block-level elements that cannot be nested inside a <p> tag. It's also important to use nested elements appropriately to maintain the semantic structure of your HTML document. For example, if you want to include a quote within a paragraph, you might use the <blockquote> tag for the quote and nest it inside a <p> tag for the paragraph.
Yes, the <p> tag supports several attributes that can be used to modify its behavior and appearance. The most commonly used attribute is the class attribute, which is used to apply CSS styles to the paragraph. Other attributes include id, title, lang, dir, style, align, etc. This may seem overwhelming right now but you will learn all about these attributes later.