HTML Paragraphs and Line Breaks

The p element is for paragraphs of text. Browsers add space above and below each paragraph automatically.

index.html

HTML

1
2

<p>The shop opens at nine.</p>
<p>Coffee is on the counter by the window.</p>

Extra spaces and new lines are ignored

HTML collapses any run of spaces and new lines into one space. This is intentional. It lets you format your code neatly without changing the page.

index.html

HTML

1
2
3

<p>This     text    has
many     spaces and
line breaks in the code.</p>

The browser shows it on one line with single spaces. If you need a different layout, use elements and CSS, not spaces.

Line breaks

Use <br> when a line break is part of the content, such as in an address.

index.html

HTML

<p>
  Juniper Books<br>
  14 Maple Street<br>
  Hillford
</p>

Horizontal rule

<hr> marks a break between topics. By default it shows as a thin line.

index.html

HTML

1
2
3

<p>Today's special: rye bread.</p>
<hr>
<p>Tomorrow: sourdough.</p>

warning

Using empty paragraphs for spacing

<p></p> or several <br> tags to create gaps is a common habit. It adds meaningless elements that screen readers may announce. Use CSS margin or padding.

lightbulb

Use one paragraph per idea

Short paragraphs are easier to read on a phone. Start a new p when the idea changes.