Why <img> shouldn't be a self-closed tag

By Steve Claridge on 2014-03-15.

The HTML <img> tag is self-closing, meaning that you write it likes this

<img src="lolinternet.jpg" alt="lol" />

and not like this

<img src="lolinternet.jpg" alt="lol"></img>

The <canvas> tag isn't self-closing and that is very useful because the content of the element is the fall-back that the browser shows if it doesn't support <canvas>, like so

<canvas id="myDrawing" width="200" height="200"> <p>Your browser doesn't support canvas.</p> </canvas>

If your browser doesn't support the <canvas> then it shows the <p> element instead. That's cool but all browsers support <img>, right? Yeah, they do, but not all images specified are available to download and so it'd be great to have a fall-back specified in the HTML if the image wasn't found. I could imagine this being useful in e-commerce systems that show product images and want to show a "no image available" image if the product doesn't have its own. You could do

<img src="nicebike.jpg" alt="a nice bike"><img src="noproductimage.jpg" alt=""></img></img>

Providing a fall-back image is easy enough to do with either JavaScript or your server-side language but it would be neater to let HTML deal with it.