HTML P Tag | Paragraph element

HTML p Tag

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.

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.

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus ipsum quaerat rem, aspernatur architecto quas fugiat porro
deleniti ut voluptas accusamus voluptate obcaecati. Voluptatum earum eligendi reprehenderit enim incidunt voluptatem?</p>

Output

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.

<p>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus ipsum quaerat rem, aspernatur
  architecto quas fugiat porro deleniti ut voluptas accusamus voluptate obcaecati. Voluptatum earum
  eligendi reprehenderit enim incidunt voluptatem?
</p>

Output

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

<pre>Lorem                ipsum dolor, sit amet consectetur adipisicing elit. Minus ipsum quaerat rem, aspernatur architecto quas fugiat porro
deleniti ut voluptas accusamus voluptate obcaecati. Voluptatum earum eligendi reprehenderit enim incidunt voluptatem?</pre>

Output