Syllabus

HTML Paragraphs & Line Breaks

Badar KhalilUpdated September 27, 2026 2 min read

HTML Paragraphs & Line Breaks

The HTML paragraph tag  and the line break tag   are two of the most frequently used elements for structuring text content — but they serve very different purposes and are often misused by beginners.

The Paragraph Element

The  tag defines a block of text as a paragraph. Browsers automatically add spacing (margin) before and after each paragraph:

Code

<p>This is the first paragraph.</p>
<p>This is a second, separate paragraph.</p>

The Line Break Element

The   tag inserts a single line break within a block of text, without starting a new paragraph. It is a void element and never needs a closing tag:

Code

<p>123 Main Street<br>
Springfield, USA<br>
ZIP: 12345</p>

vs : When to Use Which

Use  for distinct blocks of content — a new idea, topic, or thought.
Use   sparingly, only for genuine line breaks inside a single block of related content, like a mailing address or a poem.
Never use multiple   tags in a row to create spacing — that's a job for CSS margin or padding.

How HTML Handles Whitespace

One of the most important things to understand: HTML collapses multiple spaces, tabs, and line breaks in your source code into a single space when rendered in the browser. This is why you can't just press Enter in your code to create a new line on the page — you need an actual  or   tag.

Code

<p>This      text     has   extra    spaces
and line breaks in the source code.</p>
<!-- Renders as: This text has extra spaces and line breaks in the source code. -->

Key Takeaways

 creates a distinct paragraph block with automatic spacing.
  inserts a single line break within a block — it's a void element.
Don't stack multiple   tags for spacing; use CSS instead.
HTML collapses whitespace, so line breaks in your source code don't affect rendering.

Try it Yourself HTML

<p>Paragraph one: HTML is the backbone of the web.</p>
<p>Paragraph two: CSS makes it beautiful, JavaScript makes it interactive.</p>

Output

Press Run to execute.

Try it Yourself HTML

<p>
  Acme Corporation<br>
  123 Main Street<br>
  Springfield, USA<br>
  ZIP: 12345
</p>

Output

Press Run to execute.

Exercise: Format an Address BlockHTML

Use a single paragraph with br tags to format the following as a properly line-broken address: Jane Doe, 456 Oak Avenue, Denver, CO 80202.

Try it Yourself HTML

<!-- Write your formatted address here -->

Output

Press Run to execute.

This is a self-check — compare your result with the expected output above.

Was this page helpful?