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

Example

Preview

 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

Preview

<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

Example

Preview

Align attribute

The <p> element supports the alignment feature and allows us to align our paragraphs to the left, right, or center.

Syntax

Example

Preview

<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

Example

Preview

FAQs

It depends on the type of content you want to display. The <p> tag is used for displaying normal paragraph text with automatic line breaks and spacing, while the <pre> tag is used for preformatted text where spacing, line breaks, and indentation are important, such as code snippets or poetry.

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.