Home » HTML » HTML Paragraph

HTML Paragraph (<P>) Tag

HTML paragraph HTML <p> tag is used to define a paragraph in a webpage. It is a Paired Tag, i.e. it comes with an opening <p> and a closing </p> tag.

A <p> tag is very important tag, as all the content written on a website needs to get formatted in the form of paragraphs. Browsers automatically add blank lines above and below a paragraph to seaprate it from other content or othe paragraphs on the page.

HTML Paragraphs are block level elements, i.e., a new paragraph will always start from a new line. Also, Paragraph tags gets automatically closed if another block-element gets parsed before the </p> tag.

Look at the example below, to know how to use <p> tag.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Paragraph Tag </title>
</head>
<body>
<p> This is First Paragraph </p>
<p> This is Second Paragraph </p>
<p> This is Third Paragraph </p>
</body>
</html>

Output

HTML Paragraph Tag Example

This is First Paragraph

This is Second Paragraph

This is Third Paragraph


Space inside Paragraph

If you put a lot of spaces inside the HTML <p> tag, browser removes extra spaces and extra line while displaying the page. The browser counts number of spaces and lines as a single one.

You can add spaces and new lines on a paragraph by using <pre> tag but don't practice it immaturely. The spaces will look poor on the website. In the example below, as you can see in the results, all the space is ignored by the browser.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Paragraph Tag </title>
</head>
<body>
<p> This is First Paragraph. </p>
<p> This is Second Paragraph. </p>
<p> This is Third Paragraph.</p>
</body>
</html>

Output

HTML Paragraph Tag Example

This is First Paragraph.

This is Second Paragraph.

This is Third Paragraph.



HTML <pre> Element

<pre> element defines preformatted text. The text inside a <pre> tag is displayed in a fixed-width font, and it preserves both spaces and line breaks.

The <pre> tag is also a paired tag. It can be used when you want to display a certain amount of text with preformatted spaces and line breaks. For example, to display a block of code of a programming language or to display a poem with proper line breaks.

In the example below, you can see that the text is displayed as it is, in the browser, as it was written inside the <pre> tag.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Pre Tag </title>
</head>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
This is a Paragraph Tag.
This is a Paragraph Tag.
This is a Paragraph Tag.
This is a Paragraph Tag.
</pre>
</body>
</html>

Output

HTML Pre Tag Example
   This is a Paragraph Tag.

   This is a Paragraph Tag.

   This is a Paragraph Tag.
   
   This is a Paragraph Tag.

Note: If you want to add some extra space outside the Paragraph, then don't use <br> tag. Instead, use CSS Margins to change the space above/below of a paragraph.



Browser Support

Element
Microsoft Edge browser.png Edge
Chrome browser.png Chrome
Firefox browser.png Firefox
Opera browser.png Opera
safari browser.png Safari
<pre>
Yes
Yes
Yes
Yes
Yes



Color Picker

List of color names supported by all browser »



Character Code

List of character codes to display special character »



Language Code

List of all language supported by all browser »



Country Code

List of Country code supported by all browser »