HTML Paragraph

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.

<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

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

This is First Paragraph

This is Second Paragraph

This is Third Paragraph


HTML pre tag

Sometimes, using &nbsp;<br>, etc. for managing spaces isn’t very convenient. Alternatively, you can use the <pre> tag to display spaces, tabs, line breaks, etc. exactly as written in the HTML file. It is very helpful in presenting text where spaces and line breaks are important like poem or code.

The following example will display the text in the browser as it is in the source code:

Example of 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

   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

ElementMicrosoft Edge browser.png EdgeChrome browser.png ChromeFirefox browser.png FirefoxOpera browser.png Operasafari browser.png Safari
<pre>YesYesYesYesYes

Leave a Comment

Your email address will not be published.