🚨 Time is Running Out: Reserve Your Spot in the Lucky Draw & Claim Rewards! START NOW

Code has been added to clipboard!

How to Write HTML Paragraphs and Include HTML Paragraph Breaks

Reading time 3 min
Published Aug 26, 2019
Updated Sep 30, 2019

TL;DR – HTML paragraphs are block-level elements that divide plain text into sections.

How to Write HTML Paragraphs

Textual content in web pages is divided into HTML paragraphs. Web browsers add a margin (white space) after and before a paragraph automatically to separate them from one another.

To define a section of text as an HTML paragraph, you should use a pair of <p> tags:

Example
<p>This is a paragraph.</p>

<p>This is also a paragraph.</p>

<p>This is yet another paragraph.</p>

Dividing your content into HTML paragraphs make it easier to read and access. Assistive technologies (e.g., screen readers) recognize them as well and allow their users to skip paragraphs.

Note: HTML paragraphs don't have any formatting – it must be added manually.

HTML Code for Line Break

When writing HTML paragraphs, you will notice simply pressing ENTER does not produce a new line. An HTML paragraph break is defined by the <br> element:

Example
<p>You can<br>break a paragraph<br>using line breaks.</p>

You can use the <br> element whenever you need to add an HTML new line but not a new paragraph. As it is an empty element, it does not have a closing tag.

If you'd prefer to separate your paragraphs with a horizontal line instead of a simple HTML paragraph break, use the <hr> element:

Example
<h1>Operating System</h1>
<h2>Mac OS</h2>
<p>A personal computer operating system developed and marketed by Apple Inc.</p>
<hr>
<h2>Windows</h2>
<p>A personal computer operating system developed, marketed, and sold by Microsoft Corporation.</p>

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
edX
Pros
  • A wide range of learning programs
  • University-level courses
  • Easy to navigate
  • Verified certificates
  • Free learning track available
Main Features
  • University-level courses
  • Suitable for enterprises
  • Verified certificates of completion

Preformatting Text in HTML Paragraphs

By default, the text within the <p> element is displayed in one line. This causes issues when you need the text to conform to a specific format (e.g., a poem or a postal address)

You can keep the formatting with the <pre> element. It preserves spaces and text precisely as you typed them. The preformatted HTML paragraphs are displayed in a fixed-width font (usually Courier):

Example
<p>Both line breaks and spaces are preserved by the pre tag:</p>

<pre>
  My Doggo is flying into space.
  My Doggo is flying into space.
  My Doggo is flying into space.
  Oh, where will my Doggo fly now.
</pre>

Note: you don't need to include HTML paragraphs element if you're using <pre>: preformatted text will count as a paragraph with unique formatting.

HTML Paragraphs: Useful Tips

  • If you skip the <p> closing tag, the paragraph element will close automatically in HTML5. However, XHTML is stricter and doesn't allow omitting tags.
  • You can separate your paragraphs with first-line indentation instead of margins by using the CSS text-indent property.
  • If you need more blank space between paragraphs, use the CSS margin property. Don't add empty paragraphs, as it may confuse the users of assistive technologies.