Paragraphs - HTML 5 #1.3

In this article, you will get to know more about paragraphs in HTML.

Every paragraph is specified by the <p> opening tag and then the content in between and ended by the </p> closing tag.

Let's get to know the finer details of a paragraph. Take a look at the second paragraph in the below example.

See the Pen
HTML_Series_1.3 (1)
by Harsh Agrawal (@itsharshag)
on CodePen.


In the above example you can see that even when we have specified gaps between lines and extra spaces between some words, all of them haven't been applied by the browser. All the spaces have been compressed into one space and the line breaks have been ignored.

Both of the above issues can be solved in multiple ways.

1. Using &nbsp; instead of extra space and br element instead of a new line. 

  • Use &nbsp; in place of the extra space to add a new space
  • Use the content-less element <br> in place of the new line in your text to move the text to the new line.

2. Using pre element

You can solve both of the issues by using the pre element (pre-formatted text) instead of the p element to preserve the extra spaces and line breaks in your text. See the below example.

See the Pen
HTML_Series_1.3 (2)
by Harsh Agrawal (@itsharshag)
on CodePen.