What Are All the Valid Self-Closing Elements in Xhtml (As Implemented by the Major Browsers)

What are all the valid self-closing elements in XHTML (as implemented by the major browsers)?

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>

What are all the valid self-closing elements in XHTML (as implemented by the major browsers)?

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>

Are (non-void) self-closing tags valid in HTML5?

• (Theoretically) in HTML 4, <foo / (yes, with no > at all) means <foo> (which leads to <br /> meaning <br>> (i.e. <br>>) and <title/hello/ meaning <title>hello</title>). I use the term "theoretically" because this is an SGML rule that browsers did a very poor job of supporting. There was so little support (I only ever saw it work in emacs-w3m) that the spec advises authors to avoid the syntax.

• In XHTML, <foo /> means <foo></foo>. This is an XML rule that applies to all XML documents. That said, XHTML is often served as text/html which (historically at least) gets processed by browsers using a different parser than documents served as application/xhtml+xml. The W3C provides compatibility guidelines to follow for XHTML as text/html. (Essentially: Only use self-closing tag syntax when the element is defined as EMPTY (and the end tag was forbidden in the HTML spec)).

• In HTML5, the meaning of <foo /> depends on the type of element:

  • On HTML elements that are designated as void elements (essentially "An element that existed before HTML5 and which was forbidden to have any content"), end tags are simply forbidden. The slash at the end of the start tag is allowed, but has no meaning. It is just syntactic sugar for people (and syntax highlighters) that are addicted to XML.
  • On other HTML elements, the slash is an error, but error recovery will cause browsers to ignore it and treat the tag as a regular start tag. This will usually end up with a missing end tag causing subsequent elements to be children instead of siblings.
  • Foreign elements (imported from XML applications such as SVG) treat it as self-closing syntax.

What are the allowed ways to close self-closing tags for void elements such as br in HTML5?

From the W3C specification for HTML:

• The following is a complete list of the void elements in HTML:

  • area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

• Void elements only have a start tag; end tags must not be specified for void elements.

• 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.

From this it seems that we can use either <br> or <br/>. However, the end tag </br> is not valid, so don't use <br> </br>.

Running the following through the HTML Validation Service indicates as much.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Testing void elements</title>
</head>
<body>
    some lines of txt <br>
    and then some more <br />
    I'm not done yet... <br> </br> <!-- This line generates an error -->
</body>
</html>

So use either <br> or <br/>, just make sure you use them consistently.

Edit: As noted by Brad, <br /> is also valid XHTML, so perhaps it is best to choose this form.

Why does self closing tag work in a html document?

Browsers failed to implement parsers that correctly handled HTML 4 and earlier.

They should have treated <br/> as "A br element followed by a greater than sign", but instead implemented it as "A br element with a / attribute, what's a / attribute? We'll drop it". This led to the feature being marked as something to avoid.

XHTML then exploited the bug for HTML-Compatible XHTML.

HTML 5 then redefined it as syntactic sugar so the XHTML junkies could keep on using the syntax they were used to.

Using the XHTML closing slash (/) on normal tags?

No you can't do that, span is not self-closing tag. Here are the self closing tags:

<area />
<base />
<basefont />
<br />
<hr />
<input />
<img />
<link />
<meta />

Closing a TD / tag

Non-HTML Compatible XHTML (so not if you want to use a text/html content-type or support IE 8 or older).

If an element permits content (e.g., the div element) but an instance of that element has no content (e.g., an empty section), DO NOT use the "minimized" tag syntax (e.g., <div />).

— http://www.w3.org/TR/xhtml-media-types/#C_3

Are XHTML-style empty tags considered invalid in HTML5?

The syntax you describe is perfectly valid in HTML5.

EDIT: Here's a really good thread on the matter that describes the nuances: Are (non-void) self-closing tags valid in HTML5?

HTML Closing tag - PHP not seeing it

It is not acknowledged because:

<script> 

requires a closing

</script> 

and not just a / within the tag. Some HTML tags are like that.

---

Related Topics