Did you know that this works in every browser?

<image src="f1.jpg">

Look, here's one:

You might think it's leaking from SVG, but SVG images don't use src, they use xlink:href. Let's all take a moment to laugh at xlink. Done? Ok…

In the first age of the web, some people accidentally typed <image> instead of <img>. Browsers decided they should error-correct for it and we've been stuck with it ever since.

Update: As Elijah Manor points out, there's a comment hidden in the WHATWG spec suggesting a study was done in late 2005 showing ~0.2% of pages used the <image> element.

But what about:

document.querySelector('image').src = "kettle.jpg";

Well, that throws an error in Chrome, Safari and Firefox, because querySelector('image') returns null. Whereas it works fine in IE. Try it:

Change the image above

How about:

document.querySelector('img').src = "kettle.jpg";

That works in all browsers, including IE. In fact, querySelector('img') and querySelector('image') are completely interchangeable in IE. Try it:

Change the image above

How about:

var image = document.createElement('image');
console.log(image.tagName);

Well, it's "IMG" in Chrome, Safari & IE, but it's "IMAGE" in Firefox. How about:

var image = document.createElement('image');
image.src = 'f1.jpg';
document.body.appendChild(image);

This works in Chrome, Safari & IE, but Firefox treats it as an unknown element and doesn't load the image. Try it:

Add image

What's going on?

It seems:

• Firefox aliases 'image' to 'img' at parse-time
• Chrome & Safari alias 'image' to 'img' at element-creation time
• IE aliases 'image' to 'img' throughout the runtime

<image> isn't defined in any spec….

Update: As Mathias Bynens points out (who's this blog's unofficial error-spotter), <image> is specced by the WHATWG. It's only mentioned as part of token parsing, so although IE's handling of <image> feels more complete, Firefox seems to be the most spec-compliant.