The <br> tag forces a single line break inside a block of text — it does nothing else. It doesn't start a new paragraph and it doesn't add spacing on its own.
Syntax
<br>
<!-- Self-closing form, also valid: -->
<br />Basic Example
<p>
CodingNow Pvt. Ltd.<br>
Sector 62, Noida<br>
Uttar Pradesh, India
</p>Browser output: one paragraph, but displayed across three separate lines — a postal address is exactly the kind of content where the line breaks are actually part of the meaning.
How It Works
<br>is a void element — it has no closing tag and no content, because it doesn't wrap anything; it just marks a point where a new line should begin.- Unlike starting a new
<p>, a<br>keeps everything inside the same paragraph — no extra margin is added, no new semantic block is created.
Important Attributes
| Attribute | Purpose |
|---|---|
| — none — | <br> has no element-specific attributes; only the universal global attributes (like class) apply, and are rarely needed |
Real-World Example
<p>
Roses are red,<br>
Violets are blue.
</p>Poetry is one of the few genuinely correct uses of <br> — the line breaks are part of the actual content, not just visual spacing.
Comparison: br vs p
<br> | <p> | |
|---|---|---|
| What it creates | A line break inside the same block | A brand new, independent block of content |
| Semantic meaning | None — purely visual line positioning | "This is one complete paragraph" |
| Default spacing | None added | Margin above and below, from the browser's default styles |
| Correct use case | Address lines, poem lines — breaks that are part of the content itself | Separating genuinely distinct ideas |
Common Mistakes
- Stacking multiple
<br><br>to create the visual gap between paragraphs — this is a layout hack; use separate<p>tags and CSS margin instead - Using
<br>for general page layout spacing (pushing a button down, adding gaps between sections) — that's CSS's job, not HTML's
Best Practices
- Only use
<br>when the line break is genuinely part of the content's meaning (address, poem, song lyrics) - For visual spacing anywhere else, reach for CSS
marginorpadding, never a chain of<br>tags
Accessibility Considerations
Screen readers announce each <br> as a pause. A page overloaded with <br> tags used for layout creates a choppy, confusing listening experience compared to properly separated paragraphs.
SEO Considerations
No direct effect, but content built from <br>-separated fragments instead of real paragraphs and headings gives search engines a much weaker structural signal about your content.
Browser & Modern HTML Notes
<br> is a void element — in HTML5 the trailing slash (<br />) is optional and purely stylistic; both forms behave identically in every modern browser.
Mini Practice
- Mark up a business card's address using
<br>correctly inside one<p>. - Take a "wall of
<br><br>" example and refactor it into properly separated<p>elements. - Mark up the first two lines of your favorite song lyric using
<br>.
