Paragraphs and whitespace

p is a paragraph. The browser spaces paragraphs apart, and it collapses any run of spaces, tabs and line breaks inside one into a single space.

Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.

What it is for

The first surprise in HTML is that pressing Enter does nothing. Knowing what collapses, and how to ask for a real break, saves an hour of confusion.

How to think about it

Write the text however you like in the source; the browser reflows it. When you truly need a line break inside a paragraph, that is br. When you need a gap, that is a new paragraph.

Worked example

<p>One sentence.     Another, after many spaces.</p>

The five spaces become one on the page: whitespace collapses.

<p>Second paragraph.</p>

Each p gets space above and below by default, one line's worth.

<p>Line one<br>Line two</p>

A real line break inside a paragraph is br, a void element.

Your turn

Force a line break inside a paragraph.

<p>First<>Second</p>

The trap

Using several br in a row to make a gap. The gap belongs to the paragraph's margin, set in CSS; stacked breaks make a layout that falls apart on a phone.

Practise paragraphs on HoneA question on it now, a coding challenge where there is one, and it is remembered for review. Free, no email needed.