Quick guide to the br element in HTML: what it is, how to use it, and when to use it

The <br> element is one of the simplest and, at the same time, one of the most misunderstood in HTML. It serves to generate a line break within the content — nothing more, nothing less — and yet it is common to find pages full of <br> tags used for all sorts of separations. I've seen it many times, and yes, sometimes I've had to resort to <br> myself when I couldn't touch the margins or the CSS. But to get the most out of it, it's important to know when to use it, when to avoid it, and how to write it correctly.

What is the <br> element and what is it used for in HTML?

The <br> element (line break) is an HTML tag that forces a line break in the text. That is, it forces the following content to appear on the line below, regardless of whether that break makes semantic sense or not.

The concept of "line break" explained simply

Imagine typing in a text editor where you press Enter to drop to the next line. <br> does exactly that, but within an HTML document.

Why <br> is a void element

<br> belongs to the group of "void elements," which means it does not have a closing tag. Other examples are <img>, <hr>, or <meta>.

Because of this:

In HTML:

<br>

Is completely valid.

In XHTML:

<br />

Is the mandatory form.

In summary, the br element serves to create a line break, simply by using the tag:

<br>

The tag that never closes: br

HTML is a fairly open markup language that, as you may have noticed if you develop or create web pages, allows you to place errors and still the page looks correct or with some stumbles; that is, we can open a <p> tag and close with an <h2>:

<p>Text<h2>

Or even not close some tags:

<h3>Text

Although it should be noted that the previous examples are errors and therefore we must avoid them; on the other hand, we also have tags that are placed and that's it, they do not have a closing tag; for example, those of <img>, <hr>, and even the <br> itself, which is our case of interest for this entry.

Practical examples of using the <br> element

Now, if you want to layout with XHTML, which is a markup language based on HTML but less open or with a more closed syntax, then it is mandatory that all tags close:

<br />

In this case, this format.

</br>

Or this one:

<br>

Would not be valid in XHTML; although it is a good practice to close them to be compatible with XHTML and be more organized, the decision is yours.

Differences between the use of the BR tag in HTML and XHTML

As you should know, XHTML is the most organized and strict form of HTML. Things we can do in HTML and are supported by our browsers cannot be done in XHTML, and the br tag gives a good example of what we can and cannot do in XHTML; in HTML, the <br> tag does not have to close, as we showed earlier; while in XHTML, the <br /> tag does have to close, as shown above.

Example of using the br tag: Line breaks in HTML

As we indicated, the BR tag is especially useful for breaking between lines; in itself, it is its only utility in this markup language:

<p> To break lines <br> in a text,<br>use the br element </p>

To break lines 
in a text,
use the br element

Line breaks in "rigid" content

Here enters another one of the uses I encounter a lot: HTML emails, automatic generators, or content managers that do not allow style sheets to be manipulated. 

In these cases, as sometimes happens to me, <br> becomes a practical tool when the margin simply "does not exist" as an option.

Another form of line breaks: Paragraphs in HTML

We can also include line breaks with our paragraphs using the corresponding tag:

<p> To break lines <p></p> in a text,<br>use the br element </p>

To break lines 

in a text, 
use the br element 

You can find more information about the use of the p tag.

To indicate to the browser that we want to put a line break as a paragraph; with this, we won't have to worry if the space is larger than the one used in the writing with our paragraphs since it is equivalent as it is the same tag.

Correct Syntax of <br> in HTML and XHTML

Although almost everything we do today is HTML5, there are still doubts about the "correct" form.

<br> vs <br />: which one to use in 2025

• HTML5: <br> plain is recommended.
• XHTML or XML environments: <br /> is mandatory.

That said, in many projects I have used <br /> out of habit because it helps me visually identify that it is a void element, but it is not mandatory in HTML.

Common errors when writing this tag

• Writing </br> → Does not exist, should not be used.
• Using it as a general separator instead of a line break.
• Writing dozens of <br> consecutively to push content down (we've all seen this sometimes...).

When to use <br> (and when NOT to use it)

Here comes the important part: not all line breaks are the same. And <br> is not the universal tool for separating things.

• Practical cases where <br> is really useful
• There are situations where <br> is perfect:
• Poetry or text where each line has its own meaning.
• Postal addresses.
• Brief texts where a manual break improves readability.
• Forms or very compact elements.
• Content with rigid layout such as some email editors.

<br> has saved me more than once when I couldn't touch the margins because the environment didn't allow it or because a WYSIWYG editor imposed its own rules. Sometimes it is the quick and direct solution that avoids fighting with CSS.

Situations where using margins, <p>, or CSS is a better option

• Separating paragraphs → better <p>.
• Separating content blocks → better margin or padding.
• Creating large spaces → never with <br>, always with CSS.

I've seen cases where using <br> seemed faster, but then, when the project grew, those breaks started to mess up the layout and forced a redo of half the page.

Problems caused by overusing <br> in layout

• Breaks the document's semantics.
• Complicates accessibility.
• Makes it impossible to maintain a consistent design.
• Increases maintenance time.
• Leaves the HTML messy and fragile.

Alternatives to <br> for separating content

• Use <p> to separate text blocks
  • Ideal when each block has a complete idea. It is the semantically correct way to separate content.
• Manage spaces with CSS: margin, padding, line-height
  • 90% of visual spacing should come from CSS, not HTML.
• When combining <br> + CSS can be a good strategy
  • Forms where you need a slight break but want to maintain style control.
  • Lists or texts where the content may change.
• More than once I've had to use this combination when the design required it but the system's CSS was "locked" or out of reach.

Accessibility and best practices when using <br>

• How it affects screen readers
  • For screen readers, <br> represents a slight pause, but overusing them can cause confusion or break the continuity of the text.
• Why an excess of <br> breaks the document's semantics
  • HTML should describe content, not styles.
    If you use <br> for layout, you are mixing roles.
• Recommendations for keeping clean HTML
  • Use it only for real line breaks.
  • Prefer CSS for spacing.
  • Avoid duplicating <br> unnecessarily.
  • Make it consistent throughout the project.

Events, CSS, and Attributes of the BR Tag

The br tag does not have any particular attributes or events, only the global ones for the HTML API. Speaking of CSS, it also does not take particular styles except for display:none to hide the element, and therefore the line break would cease to have effect.

The w3schools recommends using the <br> element for line breaks, but not for separating paragraphs; for the latter, it is better to use other techniques such as the margin property in CSS.

Frequently Asked Questions about the <br> element

• Is it mandatory to close <br>?
  • In HTML, no. In XHTML, yes.
• How many <br> are too many?
  • More than 1 consecutive almost always indicates a layout problem.
• Is it still valid in HTML5?
  • Yes, completely.
• Can <br> be styled with CSS?
  • Almost not. It only responds to properties like display: none.

Conclusion

The <br> element is simple, but its correct use makes the difference between clean HTML and one full of "patches." It's perfect for occasional line breaks, texts with a special structure, or environments where CSS is unavailable (something that, honestly, has happened to me more times than I'd like). But when you need to separate content blocks or generate large spaces, it is always better to resort to <p>, margins, or styles.

Knowing the difference gives you control, clarity, and more maintainable code.