HTML Paragraphs

The HTML <p> tag is used to create paragraphs. For example,

<p>HTML is fun to learn.</p>

Browser Output

As we can see, a paragraph starts with the <p> and ends with the </p> tag.

HTML paragraphs always start on a new line. To demonstrate this, let's create a webpage with two paragraphs.

<p>Paragraph 1: Short Paragraph</p>

<p>Paragraph 2: Long Paragraph, this is a long paragraph with more text to fill an entire line in the website.</p>

Browser Output

The above HTML code contains two paragraphs. And each paragraph starts on a new line even though there is sufficient space after the first paragraph.

Note: By default, browsers automatically add whitespace (margin) above and below paragraphs. It is possible to change whitespace and other design aspects using CSS.

HTML Paragraphs and Spaces

Paragraphs automatically remove extra spaces and lines from our text. For example,

<p>
The paragraph tag removes      all extra spaces.
  
The paragraph tag also removes all extra lines.
</p>

Browser Output

Here, the output

• remove all the extra spaces between words
• remove extra lines between sentences

Note: It's possible to add extra spaces and lines in HTML, which we will discuss later in this tutorial.

Adding Line Breaks in Paragraphs

We can use the HTML line break tag, <br>, to add line breaks within our paragraphs. For example,

<p>We can use the <br> HTML br tag <br> to add a line break.</p>

Browser Output

Pre-formatted Text in HTML

As we have discussed, paragraphs cannot preserve extra lines and space. If we need to create content that uses multiple spaces and lines, we can use the HTML <pre> tag.

The <pre> tag creates preformatted text. Preformatted texts are displayed as written in the HTML file. For example,

<pre>
  This text  
    will be 
      displayed
      
      in the same manner 
        as it is written
</pre>

Browser Output

Other Elements Inside Paragraphs

It's possible to include one HTML element inside another. This is also true for <p> tags. For example,

<p>
We can use other tags like <strong>the strong tag to emphasize text</strong>
</p>

Browser Output

In the above example, we have used the <strong> tag inside the <p> tag.

Browsers automatically make the contents inside <strong> tags bold.

Paragraph is Block-level

The <p> tag is a block-level element. It starts on a new line and takes up the full width (of its parent element).

Note: Keep note of which elements are inline-level and which are block-level. It will be important later when we learn CSS.

Add Extra Space Inside Paragraphs

As discussed earlier, we cannot normally add extra empty spaces inside paragraphs. However, we can use a certain HTML entity called non-breaking space to add extra spaces. For example,

<p>Extra space &nbsp;&nbsp; inside a paragraph</p>

Browser Output

Here,   is an HTML entity, which is interpreted as a space by browsers. This allows us to create multiple spaces inside paragraphs and other HTML tags.