br
Produces a line break in text content. Use only where the line break is part of the content's meaning.
Description
The <br> element produces a line break in text. It is a void element (no closing tag). Use it only where the line break is an intrinsic part of the content — addresses, poetry, song lyrics — not for visual spacing between blocks.
When to Use
- Postal addresses: Line breaks between street, city, postal code
- Poetry and lyrics: Line breaks within stanzas
- Structured text: Where line breaks carry meaning in the content
When NOT to Use
- Spacing between paragraphs: Use
<p>elements or<layout-stack> - Visual gaps: Use CSS
marginorgap - Separating sections: Use
<hr>for thematic breaks
Examples
Address formatting
<address> John Smith<br /> 123 Main Street<br /> Springfield, IL 62704</address>Poetry
<p> Roses are red,<br /> Violets are blue,<br /> Sugar is sweet,<br /> And so are you.</p>Anti-Pattern: Spacing
Never use multiple <br> elements for vertical spacing. Use semantic structure and CSS instead:
Wrong vs right spacing
<!-- Wrong: using br for spacing --><p>First paragraph</p><br /><br /><p>Second paragraph</p> <!-- Right: use margin or layout --><layout-stack data-layout-gap="l"> <p>First paragraph</p> <p>Second paragraph</p></layout-stack>Accessibility
- Screen readers typically announce a line break as a pause
- Multiple consecutive
<br>elements are confusing for screen reader users — they may hear multiple pauses with no content - Use
<p>elements for distinct paragraphs so screen readers can navigate by paragraph
Related
<p>— Paragraph element (preferred for content separation)<hr>— Thematic break between sections<address>— Contact information (common br context)<wbr>— Word break opportunity (optional break, not forced)<layout-stack>— Vertical spacing between elements