Learn how to use the <br> element for forced line breaks and understand when to choose it over paragraphs.
What it is
The <br> (line break) element inserts a single newline character in text, forcing content to continue on the next line without creating a new block-level container. It is an empty element, meaning it has no closing tag. Think of it as pressing "Enter" once in a word processor: it moves the cursor down but does not start a new paragraph with extra spacing.
Related terms include whitespace collapsing (where HTML ignores multiple spaces/newlines in source code) and block-level elements like <p>, which create distinct structural sections.
Why it matters
- Address formatting: Essential for mailing addresses where each line must be distinct but part of one logical unit.
- Poetry and lyrics: Preserves specific visual line structures that standard paragraphs would disrupt.
- Form labels: Can separate a label from its input field if CSS styling is minimal or unavailable.
- Accessibility clarity: Using
<br>correctly prevents screen readers from announcing unnecessary paragraph pauses.
Syntax or steps
To insert a line break, place the <br> tag exactly where you want the text to wrap. No attributes are required. In HTML5, the self-closing slash (<br />) is optional but valid; modern best practice favors <br>.
Example
<p>
John Doe
123 Main Street
Springfield, IL 62704
</p>This example wraps address lines inside a single paragraph. The <br> tags force each component (name, street, city/state/zip) onto its own line while keeping them grouped semantically as one address block.
Common mistakes
- Using
<br>for layout: Never use multiple<br>tags to create vertical space between sections. Use CSS margins instead. - Replacing paragraphs: Do not use
<br><br>to simulate paragraph spacing. This harms accessibility and SEO. Always use<p>for distinct thoughts. - Closing tags: Attempting to write
</br>is invalid. The<br>element is void and cannot have children or a closing tag. - Inside headings: Avoid using
<br>within<h1>-<h6>tags unless strictly necessary for visual design, as it can confuse document outline tools.
When to use it
Choose <br> only when line breaks are part of the content’s meaning (like poetry). Choose <p> for normal prose separation.
| Scenario | Use Element | Reason |
|---|---|---|
| New idea or topic | <p> | Creates semantic structure and default spacing. |
| Mailing address | <br> | Lines are visually distinct but logically one unit. |
| Poetry stanza | <br> | Preserves exact line breaks intended by author. |
| Vertical spacing | CSS Margin | Separation should be presentational, not structural. |
Practice
Guided Exercise: Write HTML for a poem excerpt where each line ends with a break, but all lines belong to one stanza.
Challenge: Refactor this incorrect code: <p>Hello World<br><br>Goodbye World</p>. Why is this bad? What should replace the double breaks?
Hint: The challenge requires splitting into two separate <p> elements.
Quick check
Question: Should you use <br> to add space between two unrelated paragraphs?
Answer: No. Use separate <p> elements and control spacing with CSS margins.
Summary
The <br> element is a precise tool for content-specific line breaks, such as addresses or poetry, rather than a layout mechanism. Reserve <p> for semantic paragraph separation and rely on CSS for visual spacing to maintain clean, accessible markup.