br
Forces a new line inside the same paragraph or text block. It has no closing tag.
Platform under construction
HTML Line Breaks
Learn HTML Line Breaks as a practical HTML text lesson with syntax, examples, common mistakes, accessibility notes and a live code lab.
HTML text basics
Line breaks split text inside the same thought without creating a new paragraph.
The br element creates a line break. It is useful when the line break is part of the content itself, such as an address, a short poem, song-like text or a compact contact block.
A line break is not a layout system. If you use five br elements to create vertical space, the HTML is doing CSS work and the page becomes harder to maintain.
The wbr element is different. It tells the browser where a long word, URL or token may break if the line becomes too narrow.
wbr
Marks an optional break opportunity inside long text. The browser uses it only when needed.
Address text
Line breaks can be useful when every line is part of one address block.
Not spacing
Use CSS margin, padding or layout properties for space between sections.
Syntax and meaning
Use br only when the line break belongs to the content.
A line break says: continue the same piece of text, but start the next part on a new line.
Good line-break usage
<p> Full Stack Masterclass<br> Practical coding lessons<br> Utrecht, The Netherlands </p> <p> Long token: fullstack<wbr>masterclass<wbr>html<wbr>lesson </p>
Weak line-break usage
<h1>HTML Course</h1> <br><br><br> <section> <h2>Next section</h2> <p>This space should be CSS margin, not repeated breaks.</p> </section>
Practical rules
Use the element for meaning first, then polish it with CSS.
These rules are the part that saves time in real projects. If the HTML meaning is clean, CSS, JavaScript, accessibility checks and search optimization become easier to reason about.
Use br inside text
Addresses, poetry and compact contact details are normal use cases.
Do not stack br elements
Repeated br tags usually mean CSS spacing is missing.
Use paragraphs for new ideas
If the meaning changes, use a new p element instead of br.
Use wbr for long words
wbr helps responsive layouts survive long URLs, hashes, IDs or filenames.
Do not close br
In HTML, br is a void element. Write <br>, not <br></br>.
Keep responsive text in mind
Line breaks that look good on desktop can become awkward on mobile.
Production thinking
Small text decisions affect accessibility, SEO and maintainability.
Why does this matter?
Text markup matters because browsers and assistive technology do not only see letters. They also read structure, emphasis, quotes, code and relationships between pieces of text.
Accessibility
A few meaningful line breaks are fine. Repeated line breaks can create noisy or confusing reading experiences in assistive technology.
Production note
If editors paste content with many manual breaks, normalize it into paragraphs, lists or CSS spacing before publishing.
SEO note
Line breaks do not create structure for search engines. Headings, paragraphs and lists are stronger signals.
Live code lab
Change the code and run the example.
Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.
Mini assignment
Try this now.
- Change one tag, attribute or text value in the example.
- Run the preview and describe exactly what changed.
- Reset the lab and repeat the same change without looking at the original.
Practice assignment
Do this before moving to the next lesson.
- Change one meaningful part of the HTML, not only the visible text.
- Run the preview and check whether the result still makes semantic sense.
- Explain why the element or attribute you changed belongs in this exact place.
Try it yourself
Use br and wbr correctly
Self-check
Before you continue, prove that you own this lesson.
Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.
- Can you explain what problem this lesson solves in a real website?
- Can you identify the most important tag or attribute from this lesson?
- Can you name one accessibility mistake this lesson helps prevent?
- Can you write one good example and one weak example without copying the page?
- Can you explain when you would use this in production and when you would avoid it?