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.