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>

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.
Basics
Introduction
Syntax
Editors
Basic Examples
Head Section
<!DOCTYPE>
Tags and Elements
Semantic Elements
Tags Reference
Attributes
Comments
Block and Inline Elements
Forms
Form Elements
Input
Responsive Web Design
Inline Scripts
Uniform Resource Locator
Redirect
XHTML
Geolocation
Drag and Drop
Local Storage
Web Workers
Server-Sent Events
Character Encoding
Text Formatting
Quotation and Citation Elements
Headings
Paragraphs
Links
Tables
Lists
Symbols
Space
Tab
Styles
Computer Code
Layout
Classes
Colors
Images
iframes
Audio Player
Video Player
YouTube Videos
Multimedia
Canvas
SVG
<!-- -->
<a>
<abbr>
<acronym> DEPRECATED
<address>
<applet> DEPRECATED
<article>
<aside>
<audio>
<b>
<base>
<basefont> DEPRECATED
<bdi>
<bdo>
<big> DEPRECATED
<blink> DEPRECATED
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center> DEPRECATED
<cite>
<code>
<col>
<colgroup>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir> DEPRECATED
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font> DEPRECATED
<footer>
<form>
<frame> DEPRECATED
<frameset> DEPRECATED
<h1> – <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<keygen> DEPRECATED
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<menu>
<menuitem> DEPRECATED
<meta>
<meter>
<nav>
<noframes> DEPRECATED
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike> DEPRECATED
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt> DEPRECATED
<u>
<ul>
<var>
<video>
<wbr>