Illustration of oversized text blocks: a heading bar, paragraph lines, bullet points and quotation marks

Module 2: Text · Lesson 2 of 8

HTML Paragraphs and Line Breaks: p and br Explained

Q: How do I add a line break in HTML?

Put where the line should break, for example after each line of an address or a poem. Pressing Enter in your code does nothing, because browsers collapse whitespace. If the text is really a new idea, start a new instead. Got a long plain text to convert? A converter such as HTMLed turns its paragraphs and line breaks into p and br tags for you.

Q: Should I write br, br/ or br / in HTML?

All three work. , and mean exactly the same in HTML, because the browser ignores the slash on a void element. Plain is the shortest and the most common today. The wrong one is , since a void element has no closing tag.

About 6 minFix the bugs

By HTML6 (opens in a new tab) · Updated 2026-10-22 · How we write and check content

All lessons in Module 2

Module overview

Goal: Decide where lines break, and repair broken paragraphs.

Learn

Browsers ignore the line breaks and extra spaces in your source code. Any run of spaces, tabs and new lines collapses into a single space. This is called whitespace collapsing. Because of it, you can indent code without changing the page. The CSS specification describes the exact white space processing (opens in a new tab) rules.

So how do you start a new line? It depends on what you mean:

A new idea gets a new paragraph: .... Paragraphs are block elements: each starts on its own line, with space around it.
A line break inside one piece of text, like the lines of a poem or an address, uses  .

  is a void element. It has nothing to wrap, so it never has a closing tag. Don't stack   tags to push paragraphs apart, either. Separate paragraphs already do that.

The short version

Browsers collapse every run of spaces, tabs and line breaks in your code into a single space.
A new idea gets a new  paragraph. A   breaks a line inside one piece of text, such as a poem or an address.
  is a void element, so never write .
Don't stack   tags or empty paragraphs to create space. Spacing is CSS's job.

Example

<p>Sherlock Holmes<br>
221B Baker Street<br>
London</p>
<p>The address above is one paragraph with two line breaks.</p>

Your task

This haiku should show on three lines, but the browser squashes it together. The page has other mistakes too. Fix them:

Make the haiku show as three lines, using   inside the first paragraph.
Close each paragraph with , so the haiku and the credit line are two separate paragraphs.
Remove the : br never has a closing tag.

Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.

Quick quiz

Common mistakes

Wrong

<p>We leave at nine.<br><br>Bring a raincoat.</p>

Right

<p>We leave at nine.</p>
<p>Bring a raincoat.</p>

Two separate ideas make two paragraphs. Doubled line breaks fake the gap and hide the structure.

Wrong

<p>Our trip
  <p>We leave at nine.</p>
</p>

Right

<p>Our trip</p>
<p>We leave at nine.</p>

A paragraph cannot contain another paragraph, so the browser closes the first one early and turns the stray into an extra empty paragraph.

Go deeper

Whitespace collapsing lets you indent code freely. It is also a good reason not to break lines by hand to make text fit. Browsers wrap text automatically to the width of the screen. A   placed to make a line look nice on your laptop will leave a half-empty line on a phone. The HTML standard (opens in a new tab) says to use it only where the break is part of the content itself: lines of a poem, song lyrics or the parts of a postal address.

The gap between paragraphs comes from a default CSS margin of about one line above and below each . When two margins meet, they overlap instead of adding up, so the space between paragraphs stays even. The Box Model lesson explains margins in detail.

Paragraphs help readers too. Screen readers can jump from paragraph to paragraph. Search engines treat a paragraph as one coherent chunk of text and sometimes quote a single well-written paragraph as the snippet in results.

Sometimes you want typed line breaks to show without adding   tags. The CSS rule white-space:pre-line keeps them and still collapses extra spaces. To keep every space as well, use the pre element from Quotes and Code.

Frequently asked questions

How do I add a line break in HTML?

Put   where the line should break, for example after each line of an address or a poem. Pressing Enter in your code does nothing, because browsers collapse whitespace. If the text is really a new idea, start a new  instead. Got a long plain text to convert? A converter such as HTMLed (opens in a new tab) turns its paragraphs and line breaks into p and br tags for you.

How do I add more space between paragraphs in HTML?

Use CSS. Extra tags are the wrong tool. Browsers already put roughly one line of space between paragraphs. To change it, set a margin, for example p{margin-bottom:2em}. Stacked   tags and empty  elements give uneven results on different screens and are read out as blank lines by some screen readers.

Should I write br, br/ or br / in HTML?

All three work.  ,   and   mean exactly the same in HTML, because the browser ignores the slash on a void element. Plain   is the shortest and the most common today. The wrong one is , since a void element has no closing tag.

Tags in this lesson

 Breaks the line inside text, as in a postal address or a poem.One paragraph of text.