Line Breaks and Rules (<br>, <hr>)
<br> and <hr> are two small, easy-to-misuse elements. <br> forces a line break inside a block of text, and <hr> marks a thematic break between sections of content. Neither one is a layout tool — both have a specific semantic job, and CSS handles the rest.
<br> — Line Break
<br> inserts a single line break inside a block of running text, without starting a new paragraph or section. It's a void element — it has no closing tag and no content.
br-basic.html
<p> 123 Main Street<br> Springfield, IL 62704<br> United States </p>
When <br> Is Appropriate
<br> is meant for content where the line breaks are part of the meaning — where they exist in the source material itself, not just where a designer wants extra whitespace.
Good use case | Why |
|---|---|
Postal addresses | Each line of an address is a meaningful unit |
Poetry and song lyrics | Line breaks are part of the author's intended structure |
Short-form structured text (e.g. a signature block) | The breaks carry meaning, not just visual spacing |
poem.html
<p> Roses are red,<br> Violets are blue,<br> HTML has semantics,<br> And so should you. </p>
<br><br> tags to push content down, or using a single <br> to separate unrelated paragraphs instead of starting a new <p>, is a common misuse. Spacing between blocks of content is a CSS concern — use margin on the elements involved instead.br-misuse-vs-fix.html
<!-- Misuse: br as a paragraph separator and spacer --> <p>First idea.</p> <br><br> <p>Second, unrelated idea.</p> <!-- Fix: separate paragraphs, spacing handled by CSS --> <p class="section">First idea.</p> <p class="section">Second, unrelated idea.</p>
<hr> — Thematic Break
<hr> represents a thematic break between paragraph-level content — a shift in topic, scene, or section within a document. Visually, browsers render it as a horizontal rule by default, but that line is a side effect of the default stylesheet, not the element's purpose.
hr-basic.html
<p>The first chapter follows our hero from the village to the capital.</p> <hr> <p>Years later, a letter arrives that changes everything.</p>
<hr> renders as a horizontal line by default, it's tempting to reach for it whenever you want a visual divider — between unrelated widgets in a sidebar, for example. If there's no actual shift in topic or scene, that's a purely visual divider, and a CSS border-top on a container is the more correct tool.Element | Semantic meaning | Default visual effect |
|---|---|---|
| A line break within a single block of text | Moves following inline content to the next line |
| A thematic break between sections of content | A horizontal rule with margin above and below |
<hr> Is a Void Element
Like <br>, <hr> never has a closing tag or children. Both are self-closing in the sense that a trailing slash (<hr />) is accepted but not required in standard HTML5 — the slash is a holdover from XHTML and purely cosmetic in HTML parsing.
void-syntax.html
<!-- All equally valid in HTML5 --> <hr> <hr/> <hr />
<hr> is a real, styleable element, you can restyle its border, width, and color with CSS instead of using a one-off <div> when you genuinely need a thematic divider that looks different from the browser default.Use
<br>only where the line break is part of the content's meaning, such as an address or a poem — not for adding vertical space.Use
<hr>to mark an actual shift in topic or section, not as a generic decorative line.Reach for CSS margin, padding, and border for layout spacing and visual dividers.
Both are void elements — no closing tag and no children.
<br> Inside Form Labels and Buttons
<br> is also acceptable inside inline content like labels or buttons when a genuinely forced break improves readability of short, structured text — for example, a two-line button caption.
br-in-label.html
<label> Newsletter frequency<br> <small>(you can change this anytime)</small> </label>
<br> can break at the wrong point once the container is resized, since a hard line break doesn't adapt to available width the way wrapped text does. Prefer letting text wrap naturally, or use separate elements positioned with CSS.Accessibility of <br>
Screen readers generally treat <br> as a pause rather than announcing anything explicitly, so a sequence of <br>s used for spacing can produce a string of unnecessary pauses when the content is read aloud — another reason to avoid stacking them for visual effect.
<hr> in Semantic Sectioning
Because <section> and <article> already provide explicit sectioning, <hr> is most useful within a single section or article to mark an internal scene or topic shift — not as a substitute for actually breaking content into separate sectioning elements when the topics are truly distinct.
hr-vs-section.html
<article> <h2>A Day in Two Parts</h2> <p>The morning started quietly with coffee and planning.</p> <hr> <p>By afternoon, everything had changed — the client called with new requirements.</p> </article> <!-- Separate articles are more appropriate for genuinely separate stories --> <article> <h2>Morning Standup Notes</h2> <p>...</p> </article> <article> <h2>Client Call Follow-Up</h2> <p>...</p> </article>
Quick Reference
Situation | Use |
|---|---|
Address, poem, or signature block with meaningful line breaks |
|
Extra vertical space between unrelated blocks | CSS |
A scene or topic shift within one section/article |
|
A purely decorative divider line with no topic shift | CSS |
<br> vs CSS margin decisions, and most <hr> vs decorative divider decisions. If removing the browser's default styling would also remove meaning, it's semantic markup. If removing the styling leaves the content's meaning intact, it's a CSS concern.Default Rendering vs Semantic Meaning
It's worth separating two ideas that are easy to conflate: what an element looks like by default, and what it means. Browsers happen to render <hr> as a horizontal line, but its meaning is "thematic break" — a screen reader announcing "separator" cares about the meaning, not the pixels. The same distinction applies to <br>: it looks like empty vertical space, but it means "the line ends here, and the next line continues the same thought."
Element | Default appearance | Actual meaning |
|---|---|---|
| Line ends, content continues below | A forced break within one unit of text |
| A horizontal line with margin | A break between two distinct topics or sections |
<hr>'s visible line entirely with border: none and give it a dashed pattern instead, or style it with a gradient — the semantic "thematic break" meaning is unaffected by any of these visual changes.