TL;DR – HTML paragraphs are block-level elements that divide plain text into sections.
Contents
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:
<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:
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:
<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):
<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.