The br tag is an empty HTML element that forces a line break within text content. It has no closing tag and carries no semantic meaning beyond inserting a single line feed.
Developers reach for br when inline content must wrap without starting a new paragraph, list, or block element. Its simplicity makes it tempting, yet misuse can harm readability and accessibility.
Core Syntax and Minimal Usage
Write the tag as <br> or the XHTML-friendly form <br />; both behave identically in browsers. Omit any attributes except global ones like class or id if truly needed.
Place it between two text nodes or inline elements to create an immediate vertical shift. Browsers collapse margins around it, so it adds only the line-height of the parent element.
Inline Context Example
Consider a poem with short verses. Mark each verse break with a br instead of wrapping every line in a paragraph to retain semantic flow.
Example snippet: <p>Roses are red,<br>Violets are blue.</p> renders the second sentence on the next line while keeping both within the same paragraph semantics.
Accessibility Concerns
Screen readers treat br as whitespace, which can be ignored or announced as “break” depending on verbosity settings. Overuse forces verbose navigation without conveying structure.
Reserve br for minor breaks like postal addresses or lyrics. For thematic divisions, use headings or paragraphs so assistive technology can surface meaningful landmarks.
ARIA and Landmarks
Do not add role attributes to br; they have no effect. Instead, wrap lines that form logical units in semantic containers and style them visually.
Visual Styling with CSS
While br itself cannot accept most visual properties, you can target it via adjacent sibling selectors to add margin or padding indirectly. This trick is fragile and best avoided in production.
Prefer controlling line spacing with line-height on the parent element. The break will inherit that rhythm without extra markup.
Responsive Considerations
On narrow screens, excessive br tags can create ragged right edges and orphan words. Let natural line wrapping handle flow unless the content demands explicit breaks.
Email and Legacy Markup
HTML email clients often strip or ignore complex CSS, making br a reliable tool for line control. Use it sparingly to separate signature blocks or coupon codes.
Avoid stacking multiple br tags in succession. Two breaks can usually be replaced by a single paragraph or styled div with margin.
Plain-Text Fallback
When email is viewed in plain-text mode, br converts to a single newline character. Keep that in mind when crafting copy that must align across formats.
Microformats and Structured Data
Microformats like hCard sometimes include br within address fields to separate street, city, and postal code lines. Parsers expect this pattern and treat the breaks as delimiters.
Schema.org JSON-LD is preferred for modern structured data, but legacy markup still benefits from semantic br placement.
Internationalization Tips
Languages that read top-to-bottom, such as traditional Mongolian, still treat br as a vertical break. Test in both horizontal and vertical writing modes to confirm correct behavior.
Right-to-left scripts like Arabic preserve the break direction; the line ends and restarts on the same horizontal axis without mirroring.
Common Anti-Patterns
Do not use br to create spacing between paragraphs; margin handles that role more flexibly. Another misuse is inserting br after every heading to increase visual distance.
Each br adds a non-semantic node to the DOM. Repeated misuse bloats the document and complicates future redesigns.
Replacing with CSS
Instead of <br><br>, apply margin-bottom: 1em; to the preceding element. The visual result is identical, yet the HTML remains cleaner.
Content Management System Quirks
WordPress and similar editors convert Shift+Enter into a br tag, whereas Enter alone creates a paragraph. Train content authors to use the correct keystroke for their intent.
Some rich-text plugins insert inline styles alongside br, causing unpredictable spacing. Review the source code before publishing.
Testing Across Devices
Verify that br behaves consistently on touch keyboards that may collapse whitespace differently. Automated visual regression tests catch unintended line shifts early.
Use browser dev tools to toggle between portrait and landscape orientations. A single br can become problematic when the viewport narrows.
Search Engine Optimization Impact
Search engines treat br as whitespace, so it does not directly affect keyword density. Overuse may dilute topical focus by splitting phrases unnecessarily.
Keep meaningful keywords together within the same line or paragraph to preserve context for snippet generation.
Security and Sanitization
Because br is an empty tag, it presents minimal XSS risk. Still, sanitize user input that might inject malformed tags masquerading as br.
Content Security Policy does not target br specifically, but inline event attributes on any tag, including br, will be blocked if CSP rules are strict.
Future-Friendly Patterns
Adopt semantic containers like <address> or <pre> when the content inherently contains line breaks. These elements carry meaning and remain accessible without extra br tags.
Progressive enhancement means the page remains readable even if CSS fails. Minimal br usage aligns with that principle by avoiding purely visual markup.
Quick Reference Cheat Sheet
<br> — adds single line break.
<br> inside <p> — valid for short verses or addresses.
Multiple <br> tags — refactor to margin or padding.