Skip to main content

Paragraphs and Line Breaks

After structuring your document with headings, the next fundamental element for text content is the paragraph. HTML uses the <p> tag to define a block of text, giving it semantic meaning and ensuring browsers apply consistent spacing.


1. The Paragraph Tag (<p>)​

The primary function of the <p> tag is to logically group related sentences into a single block of content. Browsers automatically insert a margin (empty space) both before and after a closing </p> tag, visually separating one paragraph from the next.

Syntax​

The <p> tag is a block-level element that requires both an opening and a closing tag.

Paragraph Example
<p>This is the first paragraph. It contains several related sentences and is designed to stand as one complete unit of thought or topic.</p>

<p>This is the second, distinct paragraph. It is automatically separated from the first paragraph by vertical spacing, known as the margin.</p>

The Role of Whitespace​

A crucial concept in HTML is that browsers ignore excess whitespace. This includes extra spaces, tabs, and multiple line breaks within the HTML source code.

Ignored Whitespace
<p>
  This text
  will all appear
  on the same line when viewed in the browser.
</p>

If you want to manually force a line break within a single paragraph, you must use a dedicated tag.

2. The Line Break Tag (<br>)​

The line break tag (<br>) forces the text to drop to the next line without creating a new paragraph block.

Syntax​

The <br> tag is an empty (void) element which means it does not have a closing tag. It simply inserts a break point.

Line Break Example
<p>
  This line will break here:<br>
  And the text will continue directly below, but still be part of the same paragraph block.
</p>
http://.../index.html

This line will break here:
And the text will continue directly below, but still be part of the same paragraph block.

When to Use <br>​

The <br> tag should be used sparingly, primarily for content where the line structure is semantically important, such as:

  • Addresses: Separating street, city, and zip code.
  • Poetry/Song Lyrics: Preserving the original stanza structure.
  • Short Code Blocks/Signatures: Maintaining a compact vertical format.

3. Common Errors and Best Practices​

Mistake 1: Using <br> to Create Paragraph Spacing​

Never use multiple <br> tags to try and replicate the vertical spacing (margin) provided by paragraphs.

Incorrect PracticeCorrect Practice
<p>First thought.</p><br><br><p>Second thought.</p><p>First thought.</p><p>Second thought.</p>
This breaks semantics and makes styling difficult.This is semantic, accessible, and easily styled via CSS.

Mistake 2: Relying on Extra Spaces​

If you need extra horizontal spacing between words, do not use the spacebar multiple times. Use the non-breaking space entity (&nbsp;).

<p>Start of text.         Needs space.</p>

<p>Start of text. &nbsp;&nbsp; Needs space.</p>

Conclusion​

The <p> tag is the workhorse of HTML text, defining distinct blocks of thought and ensuring consistent vertical rhythm. Use the <br> tag only when a simple line break is necessary for content integrity (like addresses or poetry). By using these tags correctly, you maintain a clean, semantic document structure.