If both <br> and <br /> are valid syntaxes, which one should I use?

Question

If both <br> and <br/> are valid syntaxes, which one should I use?

Answer

There is no consensus on this and either syntax is fine to use. Whichever syntax you choose, be sure to be consistent with it.

24 Likes

Ive been reading about html and xhtml, wouldnt it be better to use <br/> or <br></br> in case we need it to be read by xml readers?

HTML5 does not require empty elements to be closed. But if you want stricter validation, or if you need to make your document readable by XML parsers, you must close all HTML elements properly.
W3Schools

21 Likes

HTML5 is essentially HTML 4.1 when served with the default MIME type, text/html. Under this MIME type the browser never parses XML so there is no need to close void elements.

It is when we explicitly serve the document with an XML MIME type, then HTML5 is equivalent to XHTML which must conform to XML syntax. That means all void elements must be closed. HTML5 came along at a time when browser quirks were being ironed out and that allowed it to remove the space before the slash that was needed in XHTML. Hence,

<br/>

and

<br />

are the same thing, and both are valid.

Generally speaking, a production site that serves XML conforming HTML5 will have its server configured to send that MIME type in the header of pages served out so that no declaration is needed in the document.

As for best practices, subjectivity should be avoided, as it tends to introduce bias. The HTML 4 standard should be applied across the board and closing void tags set aside when not explicitly required.

<br>
<hr>
<input>
<img>

says it all. This document is text/html. Closing these tags will not impress anybody.

68 Likes

I agree that in HTML5, void elements should not contain a space and/or a forward slash at the end, as per the W3C. It’s only required in XHTML and XML.

Regarding being consistent with the way we write our tags, I’ve noticed that in Codecademy’s lessons, the image element is always closed with a space and a slash like <img /> while all the other self-closing elements in the document are written without the space and slash, e.g., <meta> or <link> or <br>.

I can see how this could be confusing to beginning students of web development or anyone learning HTML.

I like to keep things as simple as possible when writing code, so I always omit the slash and/or space when closing void elements. For example:

<meta>
<link>
<br>
<img>

By the way, the terms void element, empty element, and self-closing tag all mean the same thing.

93 Likes

Thanks you for help…again :sweat_smile:

3 Likes

Thank U~~:kissing_heart:

1 Like

hmmmm…confused a little bit…

1 Like

somos 2, pero bueno, a echarle ganas!!

1 Like

I think if XML inside your Website we should use
else it’s fine whatever you use

Just so that it’s 100% clear for everyone, the W3C HTML5 spec explicitly states that either syntax is fine. (At least, as of January 2019, anyway)

From the spec:

In HTML, these elements have a start tag only. The self-closing tag syntax may be used.

A Self-closing tag is a special form of start tag with a slash immediately before the closing right angle bracket. These indicate that the element is to be closed immediately, and has no content.

In both HTML and XHTML, within each tag, whitespace is permitted after the tag name…Some authors choose to include a space before the slash in the self-closing tag.

So according to the W3C, <br>, <br/>, and <br /> are all valid HTML. You’re free to use whichever you prefer.

Personally, I prefer all of my tags to close. It feels more consistent, to me. It bugs me to see sporadic unclosed tags throughout a document full of otherwise closed tags. I understand that not everyone shares my phobia, though. :wink:

So, by all means, omit the slash if that’s your preference. But it’s perfectly valid to include it if you want to.

13 Likes

Subjective reasoning has no place in the specifications. Style guides are just that, guides.

Bottom line, if the page is being served as text/html then we do not need XML compliant markup.

There is one case where we must use XML compliant tags, JSX. What that suggests is that JSX has XML behind the scenes.

6 Likes

:man_shrugging: Dunno what to say. Take it up with the W3C?

Because, as of now, their specification clearly states that either syntax is valid, without giving an opinion as to which should be used. The spec leaves that decision entirely up to the author. Whether or not that should be the case is up to the W3C.

And to clarify, in my original post, I wasn’t so much responding to your earlier comment about best practices, but rather to the later poster who stated that “void elements should not contain a space and/or a forward slash at the end, as per the W3C .” Because the W3C says nothing of the sort. Per the W3C spec, using self-closing tags for void elements is valid. I just wanted to make that clear to everyone.

5 Likes

The specification does not speak in subjective terms. What we feel has no bearing. Nothing to take up with W3C, they state clearly that we do not need to close void elements. That only applies when the document has a MIME type of "text/html". If it is served with "application/xml" then it MUST conform to XML requirements.

3 Likes

Correct. The spec clearly states that we do not need to close void elements. But it also explicitly states that we may close them. That’s all I was saying. And that it’s my preference to close them, which is still valid HTML. And if anyone else’s preference is to close them, they may also do so whilst still writing valid HTML.

3 Likes

Which is moot. We may choose to do as we wish, but the choice itself should be non-subjective. If we use a style guide that suggests we always close them, then stick to the guide without letting personal feelings or preferences come into it. I agree that we should strive toward consistent usage. Once we enter an organization, it will be their style guide that applies, not our personal choice.

2 Likes

I don’t think it is moot. The spec treats both options as equally valid. That is an objective fact. And if both options are equally valid, then the choice as to which one we use is inherently subjective.

You say that self-closing tags are unnecessary for text/html docs and are not part of the HTML 4.1 spec from which the HTML5 spec is mostly derived. If I’m reading you correctly, you think that those are the most important facts to be considered, therefore the best practice is to omit self-closing tags unless otherwise required. That is a perfectly valid opinion. But it is a subjective opinion. You’ve made a value judgement about what you think is most important to consider in this decision.

I say that self-closing tags are valid HTML, were folded into the HTML5 spec from the XHTML spec, and that using them maintains consistency with every other tag in an HTML document, and maintains consistency with other markup languages web devs are likely to encounter, namely XML and JSX, which require self-closing tags. To me, those are the most important facts to consider, therefore the best practice is to use self-closing tags. Using them is one less thing I have to think about when I’m bouncing between documents and languages in a project, which allows me to better focus on larger problems. That is my value judgement and it is no more, nor no less, subjective than yours.

11 Likes

After reading my original comment from last year, it occurred to me I had (in haste) made an error in punctuation (not in wording) that resulted in the error you pointed out as seen below:

Original: "I agree that in HTML5 , void elements should not contain a space and/or a forward slash at the end, as per the W3C. It’s only required in XHTML and XML."

Corrected: I agree that in HTML5 , void elements should not contain a space and/or a forward slash at the end. As per the W3C, it’s only required in XHTML and XML.

1 Like

A mistake?? On the internet?? Noooooooo! :scream:

It’s all good. Happens to all of us.

2 Likes

I’m not an expert, whatsoever. I’m actually studying HTML as a total beginner. However, I would like to comment on this debate. Both of you have arguments. Allow me to express just an observation.

Though HTML allows one to use or not use closing tags for empty elements, the idea is not about what you are allowed to do but what is the minimum requirement in order for one to do what he wants.

Like mrf explained, in a style guide there shouldn’t be any subjective choice in order to create. The fact that you can be subjective it’s another story. A guide should be objective, and you can be objective when you follow the minimum requirement. In this case there is no need for a closing tag when you have an empty element. One cannot be subjective when he follows the minimum requirements because he wouldn’t be able to do what he wants otherwise. So, it’s an objective aspect.

The fact that you want to have closing tags everywhere because it helps you is a subjective choice as you are not asked to do that in the first place as a minimum requirement. I think it’s useful to have consistency too but that’s another story.

I think this problem is not a HTML one but a logical one. This is why I dared to write. I’m a total beginner otherwise.

2 Likes

The way is see it, to meet the required minimum in both XML and HTML is to close tags. You´re meeting both minimums and dont have to remember whether you´re working with HTML or XML.
Is it more work - barely,
does it bring any errors - no,
its it against rules - no,
works it as failsafe - yes.
Win-Win for all.

Minimum argument is bit problematic for me, as minimum is subjective and different file by file, system by system. What I want is go above and beyond and make users happy :slight_smile:

4 Likes