I've tried checking other answers, but I'm still confused--especially after seeing W3schools HTML 5 reference.
I thought HTML 4.01 was supposed to "allow" single-tags to just be <img>
and <br>
. Then XHTML came along with <img />
and <br />
(where someone said that the space is there for older browsers).
Now I'm wondering how I'm supposed to format my code when practicing HTML 5.
<!DOCTYPE HTML>
Is it <br>
, <br/>
or <br />
?
<br>
and<br />
render differently in some browsers, so choosing either over the other isn't going to hurt your project, but do expect a bulk find..replace to affect the page render in some browsers, which may result in extra work for yourself or even embarrassment should the change affect nothing in your test browser, but break it in the preferred browser of your clients'.I prefer
<br>
since it is what I have used since Erwise and Netscape Navigator (early web browsers), but there's no reason not to choose<br />
instead. It may be useful for some preprocessing, comparability, etc.Even if your choice boils down to preferring the look of one over the other, or you (or your favourite HTML editor e.g. Dreamweaver) might like your code to be xml compliant. It's up to you.
A quick side note:
Not to be confused with
br
, but in addition you may also consider usingwbr
tags in your HTML: A word break opportunity tag, which specifies where in a text it would be ok to add a line-break.For further reading, please have a read of the HTML5 spec.
If you are outputting HTML on a regular website you can use
<br>
or<br/>
, both are valid anytime you are serving HTML5 as text/html.If you are serving HTML5 as XHTML (i.e. content type application/xhtml+xml, with an XML declaration) then you must use a self closing tag like so:
<br/>
.If you don't the some browsers may flat out refuse to render your page (Firefox in particular is very strict about rendering only valid xhtml+xml pages).
As noted in 1.
<br/>
is also valid for HTML5 that happens to be generated as XML but served as a regular text/html without an XML declaration (such as from an XSL Transform that generates web pages, or something similar).To clear up confusion: Putting a space before the slash isn't required in HTML5 and doesn't make any difference to how the page is rendered (if anyone can cite an example I'll retract this, but I don't believe it's true - but IE certainly does a lot of other odd things with all forms of
<br>
tags).The excellent validator at http://validator.w3.org is really helpful for checking what's valid (although I'm not sure you can rely on it to also check content-type).
XML requires all tags to have a corresponding closing tag. So there is a special short-hand syntax for tags without inner contents.
HTML5 is not XML, so it should not pose such a requirement. Neither is HTML 4.01.
For instance, in HTML5 specs, all examples with
br
tag use<br>
syntax, not<br/>
.UPD Actually,
<br/>
is permitted in HTML5. 9.1.2.1, 7.Both
<br>
and<br/>
will do fine but I prefer<br/>
because it's slightly more logical. It is logical to expect a closing tag whenever there is an opening tag. Therefore your code is slightly easier to read if you don't use an opening tag when there isn't going to be a closing tag.All browser (except possibly some very old ones that don't matter) will display both exactly the same. However,
<br>
is not xHTML complient.IMHO it is better to use the regular notation (
<br />
) instead of the forgiving notation (<br>
) for the following reasons:Consistency
In your HTML there is probably some SVG and SVG only support the regular notation (e.g.
<rect />
).Hackability
It is not a case that frameworks like React and NativeScript use an XML notation.
Your markup code will be easier to parse.
Clarity
The regular notation is easier to read and understand, even late at night.
Specifications
Both
<br>
and<br />
are valid HTML tags.Conclusion
If you use a full-fledged text editor configure it to use the regular notation (which is called XHTML by Emmet).
For instance, in Visual Studio Code you just have to add the following line to your settings:
I think this quote from the HTML 5 Reference Draft provides the answer: