In element <br/>, Is the end slash compulsory?

Question

Yes
No

Answer 1

Sonic Consider the following example:

Line1<br>Line2

Any of the following would work:

<div>Line1</div>
<div>Line2</div>
----
<p>Line1</p>
<p>Line2</p>
----

In some cases, the following would also be acceptable:

Line1<span>Line2</span>

or

Line1<em>Line2</em>

Here, CSS would be used to make the <span> or <em> display as block elements that might change back to inline depending on view port, etc.

It really depends on the semantic usage that makes the most sense. 😉

Answer 2

As Javadev it used to be necessary in xhtml where the html had to be well formed XML but HTML5 is less stringent.

Answer 3

Although its not compulsory, but it's better end with end slash.

If you use react.js, it's compulsory to add end slash for every html tag element in jsx.

Answer 4

Calviղ You make an interesting point as it just occurred to me that I've never used <br/> in JSX because I just don't use <br>.

My recommendation to everyone is to avoid using <br> tags unless the line break is actually part of the content itself. It should not be used for formatting convenience purposes.

Answer 5

Sonic Here are a few reasons to not use <br> except for certain circumstances:

- <br> for formatting purposes is not semantic. Exception applies to content like poems where line breaks wouldn't change regardless of styling. I still don't use <br> tags in these situations either.

- Limited styling ability on <br> tag.

- Compatibility issues with screen readers.

These are common reasons which, incidentally, happen to be listed the following link:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br

Answer 6

Calviղ Regarding ReactJS requiring self-closing <br/>... I should have pointed out that tags in JSX aren't the same HTML parsed by the browser. While these certainly follow the same syntax, these are actually templates for generating Javascript that will create a virtual DOM that will then be used to create the actual browser DOM objects.

So... while these look the same, they are not the same and therefore the rules for empty elements are different in JSX than they are for HTML.

SANGRAM GARAI Similarly, I believe that the Blogger / blogspot templates are built in XHTML, but the content and resulting output is HTML.

Therefore, the use of <br> or <img> or <input>, etc without a slash can be used in the WYSIWYG editor.

At least... that's what I'm able to see as of now. 😉

Answer 7

Calviղ could you explain why this is recommended in React?

Answer 8

[Part 1 of 2 to Javadev]
While noticing the <br> tag in the poem sample is neither self-closing, nor used with an end tag, I wouldn't say it was "the most important part about the poem."

Personally, I would say the narrow use-case is far more interesting considering how common it is for learners to misuse <br> for styling purposes.

Rather than looking for clues to infer proper usage, just scroll down to the section titled, "Technical Summary", and review the "Tag Omission" notes in the link below:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br

Which states:
----
Must have a start tag, and must not have an end tag. In XHTML documents, write this element as <br />.
----

Moreover, <br> is an "empty" (a.k.a. "void") element, which states that the tag cannot contain any child nodes, hence no end tag.

The presence of a self-closing slash does not hurt anything. It's simply ignored or not required for HTML parsers.

I'll post a few other reference links in Part 2 of 2.

Answer 9

[Part 2 of 2 to Javadev]
The content in these online documentation links should help clear up any further confusion:

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-br-element

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br

https://html.spec.whatwg.org/multipage/syntax.html#void-elements

https://developer.mozilla.org/en-US/docs/Glossary/empty_element

Also, review #6 of the start tags section below:

https://html.spec.whatwg.org/multipage/syntax.html#start-tags

Which states:
----
"6. Then, if the element is one of the void elements..., then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements..."
----

Answer 10

Javadev - My initial reply to Calviղ regarding usage of <br/> in JSX probably took this thread off track a bit. I intentionally did not address the main topic question because I felt it had been sufficiently answered at the time.

I typically respond to threads when the existing answers are wrong; or when they include common misconceptions; or if I can provide further value to the discussion... hence me expanding on the limited usage of <br> tags.

Regarding my response to you... I felt your case for the <br> tag fell short of convincing and wanted to help you strengthen your point. In doing so, I provided some references to MDN which is too often under-utilized by learners in this community.

Optional Tags are certainly another interesting topic. But perhaps that should be for another thread. 😉

Answer 11

Great work, both answers are correct

Answer 12

As it's not compulsory the correct answer is "No" and not both.

Answer 13

No it's not

Answer 14

In xhtml or xml as in blogspot its required, in these strictly you have to close the tag. As '<br>' is a single tag you have to close it like '<br/>' . But if you are using html then its not required.

Answer 15

ARNAV SINGH the <b> tag is used to make text bold and not for line breaks.

Answer 16

David Carroll thanks and could you explain why you discourage the use of <br> ? Is it because it doesn't play well with CSS when alternating between display inline and display block?

Answer 17

If you plan to become React js developer later, I would advise you always add back slash for all the end of tags as your normal practice.

Answer 18

Agreed. void elements yes, those are what I was trying to get at. In your original answer you had just stated its better just not to use br tags. However, this question isn’t really just about br tags. It was phrased for br tags but applies to all void tags (admittedly, I guess that I concede its probably better to only use br tags for the specific use case where necessary).

But I guess that this question is more of a styling question than anything. As I probably shouldn’t jump to conclusions, maybe I shall defer to your expertise: Seeing how MDN has a specific category for “Tag Omissions”, then is it standard practice to omit tags when not required?

On that note, I did find a github google style guide and it looks pretty wild. e.g. 3.1.7
https://google.github.io/styleguide/htmlcssguide.html
is this something typical?

Answer 19

Well, you don't have to use the slash.

Answer 20

Listen, this aspect says discuss, right, there is no harm in asking a few questions, right?