🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! 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
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free 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.