Self-closing an i html tag or not

Question

I would like to know if it is a bad habbit to sel-close an i html tag.

Can I code:

<i class="icon-calendar btn"/>

Or is it better to code:

<i class="icon-calendar btn"></i>

It seems that both IE and GC correctly interpret both.

Thanks.

Answer 1

The closing tag is mandatory.

Answer 2

The short answer is: use <i class="icon-calendar btn"></i>.

In HTML up to and including HTML 4.01, <i class="icon-calendar btn"/> is formally wrong syntax, but browsers tolerate (ignore) the extraneous slash, treating this as a starting tag only. In the absence of an end tag, this is a syntax error. The practical effect depends on the context and on style sheets being used; the end of a block element may be treated as implicitly closing the open i element, as error recovery.

The same applies to HTML5 in HTML syntax (HTML serialization).

In XHTML, <i class="icon-calendar btn"/> is formally allowed and by definition identical with <i class="icon-calendar btn"></i>. However, XHTML 1.0 compatibility guidelines recommend that it be not used: “self-closing” notation should be used for elements with EMPTY declared content (i.e., elements that cannot have any content), and only for them. They also recommend that when the notation is used, a space be used before the slash /, but this hardly has any practical relevance any more.

The compatibility guidelines apply to situations where XHTML documents are processed by browsers that treat them as a bit odd-looking legacy HTML, not as genuine XML. This is what web browsers normally do. On the other hand, regarding web browsers, using XHTML is rather pointless then, and it would thus be best to avoid all the “self-closing” things, which just confuse people.