Difference Between <br> and <br/> Tag in HTML

Introduction

Suppose you want your webpage to show the below message with the same format, How will you write it in HTML?

If you are planning to use carriage return (ENTER key) to produce line breaks, then let me tell you that it won’t work because HTML will ignore any carriage return and extra spaces.

You can use the br tag which is used to produce line breaks in HTML and here are the two possible ways of using br tag.

Snippet 1:

<div>
Hello <br>
Welcome to <br>
the blog<br>
</div>

Snippet 2:

<div>
Hello <br/>
Welcome to <br/>
the blog <br/>
</div>

Both will give the same output, but what is the difference between br and br/?

But before that let’s look at some pointers.

• br tag is used to produce line breaks in an HTML document and it is a self-closing tag.
• When a tag is used with nothing between it, then a self-closing tag (or empty tag) can be used. br is one such self closing tag, which means there is no need of closing tag ( /br) while using br.
• Generally, TAG/ (not to be confused with /TAG) is used as a condensed way of writing TAG.../TAG.

So from the above pointers, it is evident that br and br/ will provide the same results when used in HTML.

But, whenever we are using XHTML (which is more strict than HTML), it doesn’t allow leaving tags open (like you cannot write just br, you have to close it also but /br doesn't make sense since it is a self-closing tag ), hence br/ will be used in that case.

Also using br is less effective when it comes to code neatness and readability than br/. Hence br/ is generally preferred over br

To sum up, the key differences between br and br/ in HTML can be understood with the help of the following table:

Difference between br and br/ Tag

Browser Compatibility

Let’s look at its browser compatibility now

Desktop Browsers

Conclusion

Both br and br/ produces the same result i.e line break. But br/ is preferred because it can be used with strict rules as well(like while writing XHTML document) and the latter looks cleaner and readable.

Read more about other self-closing tags on Scaler topics.

Author: Rdiddhi Suteri