The <br> Element
As defined in the HTML Living Standard, the <br> element represents a line break. It should only be used for line breaks that are actually part of the content, as in poems or addresses.
Roses are red,
Violets are blue,
Semantic HTML,
Is good for you.
<p>
Roses are red,<br>
Violets are blue,<br>
Semantic HTML,<br>
Is good for you.
</p>
View HTML Living Standard: The br element
Usage & Accessibility Rules
- Void Element: The
<br>tag has no content and no closing tag. - Spacing vs. Meaning: Do not use
<br>to create visual "white space" between paragraphs or sections. This is a violation of the separation of concerns between HTML (structure) and CSS (presentation). - Clearfix: Never use
<br clear="all">. This is an obsolete presentational attribute. Use modern CSS Layouts (Flexbox or Grid) instead.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
When line breaks are used to force a specific visual layout (like creating columns or vertical gaps), screen readers may struggle to present the content in a meaningful sequence. Using CSS margins for spacing ensures the programmatic structure remains clean and accessible.
Understand SC 1.3.1: Info and RelationshipsVisual Presentation Warning
Using multiple <br> elements to simulate paragraph spacing is a common anti-pattern that creates barriers for users of assistive technology.
A11y Warning: Screen Reader Navigation
Many screen reader users navigate by paragraph (using the 'P' key). If you use <br><br> to separate text instead of <p> tags, the screen reader treats the entire block as a single paragraph, making navigation and digestion of the content much more difficult.