What are all the valid self-closing elements (e.g. <br/>) in XHTML (as implemented by the major browsers)?
I know that XHTML technically allows any element to be self-closed, but I'm looking for a list of those elements supported by all major browsers. See http://dusan.fora.si/blog/self-closing-tags for examples of some problems caused by self-closing elements such as <div />.
Every browser that supports XHTML (Firefox, Opera, Safari, IE9) supports self-closing syntax on every element.
<div/>, <script/>, <br></br> all should work just fine. If they don't, then you have HTML with inappropriately added XHTML DOCTYPE.
DOCTYPE does not change how document is interpreted. Only MIME type does.
W3C decision about ignoring DOCTYPE:
The HTML WG has discussed this issue: the intention was to allow old (HTML-only) browsers to accept XHTML 1.0 documents by following the guidelines, and serving them as text/html. Therefore, documents served as text/html should be treated as HTML and not as XHTML.
It's a very common pitfall, because W3C Validator largely ignores that rule, but browsers follow it religiously. Read Understanding HTML, XML and XHTML from WebKit blog:
In fact, the vast majority of supposedly XHTML documents on the internet are served as
text/html. Which means they are not XHTML at all, but actually invalid HTML that’s getting by on the error handling of HTML parsers. All those “Valid XHTML 1.0!” links on the web are really saying “Invalid HTML 4.01!”.
To test whether you have real XHTML or invalid HTML with XHTML's DOCTYPE, put this in your document:
<span style="color:green"><span style="color:red"/>
If it's red, it's HTML. Green is XHTML.
</span>
It validates, and in real XHTML it works perfectly (see: 1 vs 2). If you can't believe your eyes (or don't know how to set MIME types), open your page via XHTML proxy.
Another way to check is view source in Firefox. It will highlight slashes in red when they're invalid.
In HTML5/XHTML5 this hasn't changed, and the distinction is even clearer, because you don't even have additional DOCTYPE. Content-Type is the king.
For the record, the XHTML spec allows any element to be self-closing by making XHTML an XML application: [emphasis mine]
Empty-element tags may be used for any element which has no content, whether or not it is declared using the keyword EMPTY.
It's also explicitly shown in the XHTML spec:
Empty elements must either have an end tag or the start tag must end with
/>. For instance,<br/>or<hr></hr>
One element to be very careful with on this topic is the <script> element. If you have an external source file, it WILL cause problems when you self close it. Try it:
<!-- this will not consistently work in all browsers! -->
<script type="text/javascript" src="external.js" />
This will work in Firefox, but breaks in IE6 at least. I know, because I ran into this when over-zealously self closing every element I saw ;-)
The self-closing syntax works on all elements in application/xhtml+xml. It isn’t supported on any element in text/html, but the elements that are “empty” in HTML4 or “void” in HTML5 don’t take an end tag anyway, so if you put a slash on those it appears as though the self-closing syntax were supported.
From the W3 Schools reference site:
<area />
<base />
<basefont />
<br />
<hr />
<input />
<img />
<link />
<meta />
Better question would be: what tags can be self-closed even in HTML mode without affecting code? Answer: only those that have empty content (are void). According to HTML specs the following elements are void:
area, base, br, col, embed, hr, img, input, keygen, link, menuitem, meta, param, source, track, wbr
Older version of specification also listed command.
Besides, according to various sources the following obsolete or non-standard tags are void:
basefont, bgsound, frame, isindex
Hope this helps someone:
<base />
<basefont />
<frame />
<link />
<meta />
<area />
<br />
<col />
<hr />
<img />
<input />
<param />
What about <meta> and <link>? Why aren't they on that list?
Quick rule of thumb, do not self-close any element which is intended to have content, because it will definitely cause browser problems sooner or later.
The ones which are naturally self-closing, like <br> and <img>, should be obvious. The ones which aren't ... just don't self-close them!
They're called "void" elements in HTML 5. They're listed in the official W3 spec.
A void element is an element whose content model never allows it to have contents under any circumstances.
As of April 2013, they are:
area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr
As of December 2018 (HTML 5.2), they are:
area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr
The last time I checked, the following were the empty/void elements listed in HTML5.
Valid for authors: area, base, br, col, command, embed, eventsource, hr, img, input, link, meta, param, source
Invalid for authors: basefont, bgsound, frame, spacer, wbr
Besides the few that are new in HTML5, that should give you an idea of ones that might be supported when serving XHTML as text/html. (Just test them by examining the DOM produced.)
As for XHTML served as application/xhtml+xml (which makes it XML), XML rules apply and any element can be empty (even though the XHTML DTD can't express this).
You should have a look the xHTML DTDs, they're all listed. Here is a quick review all the main ones:
<br />
<hr />
<img />
<input />
Another self closing tag problem for IE is the title element. When IE (just tried it in IE7) sees this, it presents the user a blank page. However you "view source" and everything is there.
<title/>
I originally saw this when my XSLT generated the self closing tag.
I'm not going to try to overelaborate on this, especially since the majority of pages that I write are either generated or the tag does have content. The only two that have ever given me trouble when making them self-closing are:
<title/>
For this, I have simply resorted to always giving it a separate closing tag, since once it's up there in the <head></head> it doesn't really make your code any messier to work with anyway.
<script/>
This is the big one that I very recently ran into problems with. For years I had always used self-closing <script/> tags when the script is coming from an external source. But I very recently started recieving JavaScript error messages about a null form. After several days of research, I found that the problem was (supposedly) that the browser was never getting to the <form> tag because it didn't realize this was the end of the <script/> tag. So when I made it into separate <script></script> tags, everything worked. Why different in different pages I made on the same browser, I don't know, but it was a big relief to find the solution!
