In HTML5 why does the <img> tag need a closing slash or a closing tag?

Question

I was a bit surprised to learn that <img> doesn't need a closing slash at the end. For example <img src="my_pic.jpg" alt="picture of me"> is valid HTML5. I thought that after HTML4 there was a transition towards having a slash at the end, or a matching end tag (e.g. <br> became <br />). Isn't the current trend to make HTML as XML compliant as possible and having <img> instead of <img /> a violation of this? Is <img> considered XHTML compliant?

Answer 1

See Are (non-void) self-closing tags valid in HTML5?, especially the third answer down.

This is fresh in my mind because I was just burned by this. I had

<div id="SearchResults" />
<input type="hidden" id="SearchResultId" />

which, because the ending slash in a self closing tag is ignored, turned into something like this in the DOM

<div id="SearchResults">
    <input type="hidden" id="SearchResultId">
</div>

I was retrieving data via AJAX, setting the hidden field to a returned value, and then setting the inner content of the div to some other returned data. I was overwriting the hidden field in the process and it took a couple of hours to figure out why the hidden field value was not being posted back.

Answer 2

No, it isn't XML compliant, and it isn't meant to be.

HTML5 has two syntaxes you can use. One is an XML syntax based on XHTML. The other one is just called "html", and it's derived from the original SGML-based HTML. In practice, neither XML nor HTML implementations actually supported all of SGML's features, so you end up with two slightly different child languages.

One of the features that HTML took from SGML but XML didn't is the idea of omitted tags. For example, here is the SGML definition of the IMG element:

<!ELEMENT IMG - O EMPTY -- Embedded image -->

The first "-" means that the opening tag is required. The following "O" means that the ending tag can be omitted. And the "EMPTY" means that the element cannot have any content.

But one of the SGML features that went into XML but not HTML is null end tags, which allows you to append a slash to immediately close a tag. This became XML's self-closing tags feature.

So in the XML syntax, you can use self-closing tags, while in the html syntax, you can omit start or end tags on certain specified elements.

As for whether "the current trend [is] to make HTML as XML compliant as possible" — well, that's kind of a matter of opinion and context, but I don't think so. That was definitely the trend 12 years ago, but then XHTML pretty much stalled out and a lot of people just said, "Screw it, it's being parsed as HTML anyway." There is still some value in having your documents be well-formed XML if you want to use XML tools to operate on them, but in general most people don't need that.