HTML 5: Is it , , or ?

Question

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\" singl

Answer 1

In HTML5 the slash is no longer necessary: <br>, <hr>

Answer 2

I think this quote from the HTML 5 Reference Draft provides the answer:

3.2.2.2 Void Elements

The term void elements is used to designate elements that must be empty. These requirements only apply to the HTML syntax. In XHTML, all such elements are treated as normal elements, but must be marked up as empty elements.

These elements are forbidden from containing any content at all. In HTML, these elements have a start tag only. The self-closing tag syntax may be used. The end tag must be omitted because the element is automatically closed by the parser.

HTML Example:
A void element in the HTML syntax. This is not permitted in the XHTML syntax.

<hr>

Example:
A void element using the HTML- and XHTML-compatible self-closing tag syntax.

<hr/>

XHTML Example:
A void element using the XHTML-only syntax with an explicit end tag. This is not permitted for void elements in the HTML syntax.

<hr></hr>

Answer 3

As many others have covered, both <br> and <br/> are acceptable.

I guess the tradeoff is the better readability and backward compatibility of <br/> versus sending one less character to the end users with <br>.

And since Google uses <br> so will I.

(Of course keep in mind that they might be serving me <br> because I'm using Chrome which they know supports it. In IE they might still be serving <br/>)

Answer 4

<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 using wbr 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.

Answer 5

In validation, of this question, it really depends on what !DOCTYPE you are trying to get verification through.

My personal favorite is 4.01 Trans where I just use the <br/> and it clears the warnings and errors that may have popped up during validation

Strict is a much more complicated beast, It HATES "SHORTTAGS" and quite literally only wants the <br></br>

In HTML5 or the "LAX" of the code world, there really isn't a right answer because it detects every example you put up there as correct......

In the end, I think all that matters is what validation YOU PREFER or the person that you are working for prefers... with the lackadaisical movement in code strictness in html5 we are seeing some VERY LAZY CODERS

Answer 6

XML doesn't allow leaving tags open, so it makes <br> a bit worse than the other two. The other two are roughly equivalent with the second (<br/>) preferred for compatibility with older browsers. Actually, space before / is preferred for compatibility sake, but I think it only makes sense for tags that have attributes. So I'd say either <br/> or <br />, whichever pleases your aesthetics.

To sum it up: all three are valid with the first one (<br>) being a bit less "portable".

Edit: Now that we're all crazy about specs, I think it worth pointing out that according to dev.w3.org:

Start tags consist of the following parts, in exactly the following order:

1. A "<" character.
2. The element’s tag name.
3. Optionally, one or more attributes, each of which must be preceded by one or more space characters.
4. Optionally, one or more space characters.
5. Optionally, a "/" character, which may be present only if the element is a void element.
6. A ">" character.