HTML 5: Is it
I thought HTML 4.01 was supposed to "allow" single-tags to just be
<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.
<br> is sufficient.
The other forms are there for compatibility with XHTML; to make it possible to write the same code as XHTML, and have it also work as HTML. Some systems that generate HTML may be based on XML generators, and thus do not have the ability to output just a bare
<br> tag; if you're using such a system, it's fine to use
<br/>, it's just not necessary if you don't need to do it.
Very few people actually use XHTML, however. You need to serve your content as
application/xhtml+xml for it to be interpreted as XHTML, and that will not work in old versions of IE - it will also mean that any small error you make will prevent your page from being displayed in browsers that do support XHTML. So, most of what looks like XHTML on the web is actually being served, and interpreted, as HTML. See Serving XHTML as text/html Considered Harmful for some more information.
Read more… Read less…
I think this quote from the HTML 5 Reference Draft provides the answer:
188.8.131.52 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.
A void element in the HTML syntax. This is not permitted in the XHTML syntax.
A void element using the HTML- and XHTML-compatible self-closing tag syntax.
A void element using the XHTML-only syntax with an explicit end tag. This is not permitted for void elements in the HTML syntax.
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 />, 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:
- A "<" character.
- The element’s tag name.
- Optionally, one or more attributes, each of which must be preceded by one or more space characters.
- Optionally, one or more space characters.
- Optionally, a "/" character, which may be present only if the element is a void element.
- A ">" character.
In HTML (up to HTML 4): use
In HTML 5:
<br> is preferred, but
<br /> is also acceptable
<br /> is preferred. Can also use
<br></br>is not valid in HTML 5, it will be thought of as two line breaks.
- XHTML is case sensitive, HTML is not case sensitive.
- For backward compatibility, some old browsers would parse XHTML as HTML and fail on
I would recommend using
<br /> for the following reasons:
1) Text and XML editors that highlight XML syntax in different colours will highlight properly with
<br /> but this is not always the case if you use
<br /> is backwards-compatible with XHTML and well-formed HTML (ie: XHTML) is often easier to validate for errors and debug
3) Some old parsers and some coding specs require the space before the closing slash (ie:
<br /> instead of
<br/>) such as the WordPress Plugin Coding spec: http://make.wordpress.org/core/handbook/coding-standards/html/
I my experience, I have never come across a case where using
<br /> is problematic, however, there are many cases where
<br/> or especially
<br> might be problematic in older browsers and tools.