HTML Paragraphs | <p> Tag

HTML Paragraphs

HTML Paragraphs are defined with <p> tag. You can create small sections of your text instead of writing a long content without any break.

This element has both opening and closing tag. You need to put your content inside of <p> and </p> tags.

This element adds a blank space above and below the text content, this is how it creates the separator between two paragraphs.

Using HTML paragraphs is very important for making your webpage user friendly. It becomes very easy to follow the content when there are several breaks in between.

<p>This is a simple paragraph.</p>
<p>This is another paragraph.</p>

The output shows in a web browser:

This is a simple paragraph.

This is another paragraph.


HTML Display in Browser

When you look at any web browser, you see that there are many sections of text. All browsers have a default way to show the HTML paragraphs.

With HTML paragraphs, you cannot change the output by adding extra spaces or extra lines in your code.

Browsers always ignore all those extra spaces and lines in <p> element.

<p>
This paragraph
has         a lot of spaces
in the source         code,
but the        browser 
ignores them.
</p>
<p>
This paragraph
has a lot of lines
in the source code,
but the browser 
ignores them.
</p>

The output shows in a web browser:

This paragraph has a lot of spaces in the source code, but the browser ignores them.

This paragraph has a lot of lines in the source code, but the browser ignores them.


HTML Paragraphs Attribute

You can use align attribute to fix your paragraph alignment. There are total four values for this attribute i.e. Left, Right, Center, and Justify.

Note: Left is the default value for all web browsers.

Align Right

This value is used to move the content from left to right.

<p align="right">
This paragraph contains align right attribute in the source code.
</p>

The output shows in a web browser:

This paragraph contains align right attribute in the source code.

Align Center

This value is used to make the paragraph centered in a web browser.

<p align="center">
This paragraph contains align center attribute in the source code.
</p>

The output shows in a web browser:

This paragraph contains align center attribute in the source code.

Align Justify

This value expands the lines from left to right so that each line takes equal width (like newspapers and magazines).

<p align="justify">
This paragraph contains align justify attribute in the source code. Each line will take equal width of the parent container. 
</p>

The output shows in a web browser:

This paragraph contains align justify attribute in the source code. Each line will take equal width of the parent container.

Using align attribute inside a paragraph element is not the good practice. You should not use it. Instead of using this attribute, you can do the same thing using CSS.


Paragraph Alignment with CSS

Instead of using align attribute, you can set the alignment of any HTML element using the text-align CSS property.

Here, you also have four value for this property i.e. Left, Right, Center, and Justify.

They work exactly the same way as align do. To use this property, you need to use style attribute.

<p style="text-align: right">
This paragraph contains text-align right property in the source code.
</p>
<p style="text-align: center">
This paragraph contains text-align center property in the source code.
</p>
<p style="text-align: justify">
This paragraph contains text-align justify property in the source code. Each line will take equal width of the parent container. 
</p>

The output shows in a web browser:

This paragraph contains text-align right property in the source code.

This paragraph contains text-align center property in the source code.

This paragraph contains text-align justify property in the source code. Each line will take equal width of the parent container.


HTML <pre> Element

HTML <p> tag always display text in one line. This creates problem while writing poem or giving a custom format in the paragraph.

You can keep the formatting with the HTML <pre> element to solve this problem.

For example, if your content has additional spaces and lines, this element is quite useful.

Instead of using <p> just use <pre>, and browser will count it as a paragraph with unique formatting.

Browser will display the content exactly in the same format you use inside the <pre> element.

<pre>
  My Doggo is flying into space.
  My Doggo is flying into space.
  My Doggo is flying into space.
  Oh, where will my Doggo fly now.
</pre>

The output shows in a web browser:

  My Doggo is flying into space.
  My Doggo is flying into space.
  My Doggo is flying into space.
  Oh, where will my Doggo fly now.

HTML Line Breaks

The HTML <br> defines the line break.

You can create a new line using this tag. It is an empty element. There is no closing tag.

<p>This is a paragraph<br>with a line break.</p>

The output shows in a web browser:

This is a paragraph
with a line break.


HTML <span> Element

The HTML <span> tag is useful for grouping and applying style to inline elements. This tag does not provide any visual change by itself.

The main difference between the <span> tag and <p> tag is, span is an inline-level element and p is a block-level element.

<p> creates a new line and takes up the full width of its parent container. On the other hand, <span> does not create new line and takes up as much width as necessary.

<p>
This is a <span style="color:red;">paragraph with span</span> tag.
</p>

The output shows in a web browser:

This is a paragraph with span tag.


Always Use the End Tag

Most browser will display the HTML elements correctly without the closing tag. However, this might create unexpected results or errors.

Always use closing tag to structure your HTML document properly.

<p>This is a paragraph without the closing tag.
<p>This is a paragraph with the closing tag.</p>

The output shows in a web browser:

This is a paragraph without the closing tag.

This is a paragraph with the closing tag.


Time to practice:

OUTPUT

Learn more about basic tags, our tutorial – HTML Basic Tags