Web Development Course:
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:
<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:
<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:
<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.
HTML5 Tags List: Get to Know the Most Useful Elements
Find HTML5 tags explained and illustrated with beginner-friendly HTML5 examples. Grasp the difference between HTML5 tags & elements and learn to use both!
HTML Inline Elements and Block Elements: Learn the Difference
Complete tutorial on inline elements in HTML: find out the main difference between inline elements & block elements by learning from included examples.