How to Create HTML Paragraphs

John on December 22, 2020

A paragraph is a block of text containing related sentences. In HTML, paragraphs are created using the p tag.

Creating Paragraphs in HTML

The HTML p tag requires an opening and closing tag which wrap the paragraph. Here is an example of two paragraphs of text in HTML:

<p>This is a paragraph of text.</p>
<p>This is another paragraph of text</p>

This is a paragraph of text.

This is another paragraph of text

The browsers default CSS will style p tags to have a margin on the top and bottom, though you can add your own CSS to adjust the look of them.

Creating Line Breaks in a Paragraph

Sometimes, as a stylistic choice, you will want to put line breaks inside of a paragraph. This can be done using the HTML br tag, Unlike p tags, br does not need a closing tag as it will never contain content.

<p>This is a paragraph of text, within which we are going to add a line break here.<br> And then continue with the rest of the paragraph.</p>
<p>This is another paragraph of text</p>

This is a paragraph of text, within which we are going to add a line break here.
And then continue with the rest of the paragraph.

This is another paragraph of text

Splitting Sections of Content with Horizontal Rules

When your text moves onto a new topic you may want to signify this with a line separator. This can be done with the HTML hr tag. Place it between paragraphs like this:

<p>This is a paragraph of text.</p>
<hr>
<p>This is another paragraph with a new topic.</p>

Adding Multiple White Spaces

Introducing multiple whitespaces won't have any effect when the HTML page is rendered in the browser. To display multiple whitespaces in an HTML paragraph use   which is an acronym for non-breaking space.

<p>This is some text with &nbsp;&nbsp;&nbsp; multiple non-breaking spaces in it.</p>

Preformatted Text

Sometimes you will need text to appear exactly as it is laid out in the source code in term of spacing and line breaks. This can be done using the HTML pre tag.

<pre>This is some preformatted text
   preformatted text
      preformatted text
</pre>

Conclusion

You now know how to create and format paragraphs in HTML and thematically separate them.