Home » HTML » HTML Paragraph

HTML P Tag - Paragraph element

HTML p tag defines 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, 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. It separates a paragaph from other content or other paragraphs on the page.

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

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

Example of HTML p tag Try this code »

<!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


How html treats whitespace in a paragraph

If you put a lot of spaces inside the HTML p tag, browser removes those unnecessary spaces while displaying the page. The browser counts multiple consecutive 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 tag

HTML pre tag 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 a paired tag; it displays text as it was written within the tag. Browser won't omit consecutive spaces or line breaks. It is used 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.

Example of pre tag Try this code »

<!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 the 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