HTML5 Void Elements: Should You Use <br>, <br/>, or <br />?

By the end of this page, you will understand how HTML5 handles void elements like br, why <br> is the standard HTML form, why <br/> and <br /> may still appear in code, and how this differs from XHTML and XML-style syntax.

In HTML5, br is a void element. A void element is an element that cannot have any content inside it and does not need a closing tag.

That means this is the normal HTML5 form:

<br>

Why this matters

HTML has rules for different kinds of elements:

• Normal elements have an opening and closing tag:

  <p>Hello</p>
  

• Void elements do not wrap content and do not use closing tags:

  <br>
  <img src="photo.jpg" alt="Photo">
  <input type="text">
  

In HTML5, the parser already knows that br is void, so it does not need / to mark it as self-closing.

What about <br/> and <br />?

These forms come from XHTML/XML syntax, where empty elements are often written using a self-closing slash.

Examples:

<br/>
<br />

In HTML5 parsed as HTML, these are usually accepted by browsers and treated the same as <br>. However, the / does not make the tag self-closing in the HTML parsing model in the same XML sense. It is basically ignored for HTML void elements.

Best practice in HTML5

If your document is regular HTML5, use:

<br>

It is the simplest and most idiomatic HTML5 syntax.

Important distinction: HTML vs XHTML

The correct choice depends on the document type and parser:

• If the document is HTML5 served as text/html, use HTML syntax such as <br>.
• If the document is XHTML/XML served as XML, use XML-style syntax such as <br />.

So the real concept here is not just about br. It is about understanding:

• void elements
• HTML parsing rules
• the difference between HTML and XHTML/XML syntax

Think of HTML elements like containers.

• A normal element like <p> is a box with a start and end:

  • open the box: <p>
  • put content inside
  • close the box: </p>

• A void element like <br> is more like pressing a button than opening a box.

  • It performs a specific action
  • It does not hold content
  • There is nothing to close

So writing <br> in HTML is like pressing a “new line” button.

Adding / in <br /> is like writing extra punctuation the browser does not need when reading normal HTML. It may still accept it, but the simpler native form is just <br>.

Core syntax

In HTML5, a line break is written as:

<br>

Example

<p>Hello<br>World</p>

This displays as:

• Hello
• World

on separate lines within the same paragraph.

Other valid forms you may see

<br/>
<br />

Browsers typically accept these in HTML5 documents, but the standard HTML style is:

<br>

More void element examples

These are also void elements in HTML:

<img src="cat.jpg" alt="Cat">
<input type="email">
<hr>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">

They do not have closing tags like this:

<!-- Incorrect -->
<br></br>
<img></img>

When <br> should be used

<br> is for a line break, not for creating large vertical spacing or page layout.

A good use:

<p>
  123 Main Street<br>
  Springfield, IL<br>
  USA
</p>

A poor use:

<p>Title</p>
<br>
<br>
<br>
<p>Next section</p>

For spacing and layout, use CSS instead.

Consider this example:

<p>First line<br>Second line</p>

Step-by-step

1. The browser reads <p> and starts a paragraph.
2. It reads the text First line.
3. It reads <br>.
4. Because br is a void element, the browser inserts a line break immediately.
5. It reads Second line on the next line.
6. It reads </p> and ends the paragraph.

Result

The paragraph contains two lines:

• First line
• Second line

Compare with a normal element

<p><strong>Hello</strong></p>

Here the browser:

1. Opens <p>
2. Opens <strong>
3. Reads Hello
4. Closes </strong>
5. Closes </p>

strong wraps content, so it needs a closing tag. br does not wrap content, so it does not.

Where br is actually useful

Addresses

<p>
  Jane Doe<br>
  42 River Road<br>
  Austin, TX 78701
</p>

Poems or song lyrics

<p>
  Roses are red<br>
  Violets are blue<br>
  HTML has void tags<br>
  And now you do too
</p>

Compact labels in UI text

<p>Order confirmed<br>Expected delivery: Monday</p>

Where it should not be used

• Creating page spacing
• Pushing elements down the page
• Replacing proper paragraph structure
• Replacing CSS margins or layout tools

For example, in real apps developers use CSS for spacing:

<section class="card">
  <h2>Profile</h2>
  <p>Welcome back.</p>
</section>

.card {
  margin-bottom: 2rem;
}

In real codebases, developers usually follow a consistent markup style based on the document type and formatter.

Common patterns

1. Use plain HTML syntax in HTML5 files

Most teams writing standard .html files use:

<br>
<hr>
<img src="logo.png" alt="Logo">

2. Let formatters enforce consistency

Tools such as formatters or linters may output either:

<br>

or

<br />

depending on the environment or template system. In many codebases, consistency matters more than personal preference.

3. Framework and template differences

Some templating systems, JSX, or XML-based formats may prefer self-closing syntax:

<br />
<img src="/logo.png" alt="Logo" />

That is not because HTML5 requires it, but because the syntax rules of that environment do.

4. Semantic usage matters more than slash style

In production code, the bigger concern is whether br is being used correctly.

Good:

<p>
  Support Team<br>
  support@example.com
</p>

Less good:

<div>Heading</div>
<br><br><br>
<div>Content</div>

Teams often review this as a semantic or CSS issue rather than a tag-slash issue.

Practical takeaway

In real HTML5 projects:

• Prefer <br> in normal HTML files
• Use self-closing syntax only when the surrounding syntax requires it
• Focus on semantic correctness and consistency

1. Adding a closing tag to br

Broken code:

<br></br>

Why it is wrong:

• br is a void element
• Void elements do not have closing tags

Use this instead:

<br>

2. Thinking / is required in HTML5

Beginners often assume this is more correct:

<br />

It is accepted in many cases, but HTML5 does not require it for HTML documents.

The standard HTML form is:

<br>

3. Using br for layout spacing

Broken approach:

<h1>Welcome</h1>
<br>
<br>
<p>Start here</p>

Better approach:

<h1>Welcome</h1>
<p class="intro">Start here</p>

h1 {
  margin-bottom: 1rem;
}

4. Confusing HTML with XHTML or JSX

What works in JSX:

<br />

What is idiomatic in HTML5:

<br>

Always consider the language you are writing.

5. Trying to put content inside a void element

Broken idea:

<br>Text</br>

br does not contain content. It only inserts a line break.

6. Overusing br instead of paragraphs

Less semantic:

Line one<br><br>Line two<br><br>Line three

Better if they are separate paragraphs:

<p>Line one</p>
<p>Line two</p>
<p>Line three</p>

HTML vs XHTML syntax for empty elements

Comparing the three forms

br vs paragraph spacing

Void elements vs normal elements

Quick answer

In HTML5, use:

<br>

Key rule

br is a void element:

• no closing tag
• no inner content
• no need for / in HTML

Valid forms you may see

<br>
<br/>
<br />

Best choice by context

• HTML5 document: <br>
• XHTML/XML: <br />
• JSX: <br />

Other HTML void elements

<area>
<base>
<br>
<col>
<embed>
<hr>
<img>
<input>
<link>
<meta>
<source>
<track>
<wbr>

Don’t do this

<br></br>

Good use cases

• addresses
• poems
• lyrics
• line breaks inside one paragraph

Avoid using br for

• layout
• large spacing
• replacing margins or padding

Use CSS for spacing instead.

Is <br> valid in HTML5?

Yes. It is the standard HTML5 form for a line break.

Is <br /> wrong in HTML5?

Not usually. Browsers accept it in HTML documents, but it is XML-style syntax rather than the usual HTML5 style.

Should I use <br> or <br />?

If you are writing normal HTML5, use <br>. If you are writing XHTML or JSX, use <br />.

Is <br/> different from <br />?

In most HTML5 browser parsing, both are treated the same. The space is mainly a style difference.

Can I write </br>?

No. br is a void element and must not have a closing tag.

Why do some tools still generate <br />?

Some tools follow XML-style formatting, support multiple markup targets, or use syntax rules like JSX.

Should I use multiple <br> tags for spacing?

Usually no. Use CSS margins or padding for layout and spacing.

What is a void element in HTML?

A void element is an element that cannot contain content and does not use a closing tag, such as br, img, or input.

• Void elements — br belongs to this category, so understanding void elements explains why no closing tag is needed.
• HTML vs XHTML — the syntax difference between <br> and <br /> comes directly from these two markup styles.
• HTML parsing — browsers interpret HTML using parsing rules that differ from XML parsing.
• Semantic HTML — helps you know when br is appropriate and when a paragraph or other element is better.
• CSS spacing — important because br should not be used as a layout tool.
• JSX syntax — relevant because JSX requires self-closing tags like <br />.
• Common HTML elements — learning which elements are void versus normal helps prevent invalid markup.