Paragraphs, Line Breaks and Thematic Breaks

Concept

Body text lives in paragraphs. A paragraph is a block of related sentences, and the p element marks its boundaries so that browsers can space it, screen readers can move through it one unit at a time, and reading modes can extract it.

Two elements are often mistaken for spacing controls:

• br forces a line break inside a block of text, where the break is part of the content.
• hr marks a thematic break - a change of subject - which browsers happen to draw as a horizontal line.

Syntax

<p>A paragraph of text.</p>

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

<hr>

Both br and hr are void elements: no content, no end tag.

Whitespace collapses

The single most surprising rule for a beginner. Any run of spaces, tabs and newlines in the source is collapsed into one space when rendered.

<p>These      words        are
   spread   across
   several       lines.</p>

renders as one continuous line: These words are spread across several lines. You cannot format text by adding spaces or pressing Enter. This is deliberate - it lets you indent your source for readability without changing the output.

Two ways round it when the whitespace really is content:

• pre preserves every space and newline exactly as typed.
•   is a non breaking space, which is not collapsed and does not wrap. Use it to keep 10 kg or Dr Rao together, never to build indentation.

Example

<h2>Delivery address</h2>

<p>Orders ship from the Pune warehouse every weekday afternoon.
   Anything placed after four o'clock leaves the next morning.</p>

<p>
  Meera Iyer<br>
  14 Sadar Bazaar Road<br>
  Pune 411001<br>
  Maharashtra
</p>

<hr>

<h2>Returns</h2>
<p>Unopened items can be returned within thirty days.</p>

Explanation

The first paragraph is prose; the source is wrapped across two lines and the browser collapses that into flowing text, exactly as intended.

The second is a postal address, and here the line breaks are genuinely part of the content - an address written on one line is a different thing. This is what br is for.

The hr between the two sections says the subject changes here. It is not there to draw a line; it is there to record a shift, and the line is how the browser chooses to show it.

Important rules

• A p may contain inline content only. The parser closes it automatically the moment a block element appears inside, which produces nodes you did not write.
• An empty paragraph is not a spacing tool. Browsers may collapse it, and screen readers announce a paragraph with no content.
• Every br is announced by some screen readers as a break. A run of them is noise.
• hr is semantic. Its meaning is thematic break, and it appears in the accessibility tree as a separator.
• The closing tag of a paragraph is technically optional, but omitting it invites the parser to guess where the paragraph ended.

Common mistakes

• Stacking <br><br><br> to push content down the page. That is a margin, and it belongs in CSS.
• Wrapping every line of a list in br instead of using ul and li. The list loses its item count and its keyboard navigation.
• Using   repeatedly to indent a line. Indentation is padding or margin.
• Putting a div, a heading or a list inside a paragraph and being surprised by the resulting DOM.
• Using hr purely as decoration when no subject change is happening. A border-top on the next section is the honest way to draw a line.
• Expecting pressing Enter in the source to break the line on screen.

Best practices

• One idea per paragraph. Long paragraphs are hard to read on a phone and hard to follow when read aloud.
• Reserve br for addresses, verse, song lyrics and short form content where the break carries meaning.
• Control every gap between blocks with CSS margins so the spacing is consistent site wide.
• Write the closing </p> even though it is optional.
• Let the source wrap wherever it is convenient. The renderer does not care and your reviewers will thank you.

Practice

1. Write a paragraph in the source with twenty spaces between two words and confirm what the browser renders. Then wrap the same text in pre and compare.
2. Mark up a four line postal address, then a two paragraph news item. Explain why one uses br and the other does not.
3. Replace three stacked br tags with a CSS margin and describe what improved for a screen reader user.
4. Find a page that uses hr as decoration. Would removing it change the meaning of the page? If not, it should not be there.