Advertisement

Advertisement


HTML Paragraph

HTML paragraph or HTML <p> tag is used to define a paragraph in a webpage. It is a notable point that a browser itself add an empty line before and after a paragraph.

Let's take a simple example to see how it work.


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


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


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

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










Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.