HTML br and hr: separate a line from a change of subject

Use the distinction

A printed collection address has meaningful line boundaries, so line breaks help preserve its postal form. Below it, a new paragraph changes from collection instructions to an exception policy. That change can justify a thematic separator if the surrounding headings do not already make the shift clear. Ordinary paragraphs should usually remain paragraphs; inserting repeated br elements to force a visual gap makes source order harder to maintain and can sound strange when read aloud. A heading is preferable when the next passage begins a named section that readers should find by heading navigation.

<main>
  <h1>Collection notice</h1>
  <p>Return damaged parcels to:<br>
     Bay 47<br>
     North depot<br>
     Harbour Road</p>
  <p>Attach the intake record before the collection window closes.</p>
  <hr>
  <p>If the seal is open, hold the parcel for a supervisor instead.</p>
</main>

Behavior and cost

Both elements are tiny and need no script. The cost is editorial misuse: an hr cannot create a new section hierarchy, and br cannot make a list or address relationship that is not present in the words. CSS owns margins and borders. Test the page with styles disabled and at narrow widths; the breaks should still match the text's intended meaning. If the separator adds no meaning beyond a visual rule, put that rule in CSS rather than in the document.

Common Mistakes

• Do not stack br elements to simulate paragraph margins.
• Do not insert hr between every section when headings already express the division.
• Do not use a visible line as the only cue for a changed instruction.

Connected lessons

• HTML headings and paragraphs: expose a readable outline without styling tricks
• HTML address: identify contact details for the right owner
• HTML article and section: mark standalone content and named subdivisions